css實現標題欄梯形效果

如圖要實現這裏標題欄效果，可使用css而不用圖片

<div class="header-slide">
  <span class="span-left on">項目總瀏</span>
  <span class="span-right">實時監控</span>
</div>
複製代碼

.header-slide {
      color: #fff;
      display: flex;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;
      span {
        padding: 0.4rem;
        z-index: 1;
        top: 0.3rem;
        position: relative;
      }
      .span-left::after {
        content: '';
        position: absolute;
        top: 0.6rem;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #40649d;
        z-index: -1;
        -webkit-transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        -moz-transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        -ms-transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        -o-transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        -webkit-transform-origin: bottom right;
        -moz-transform-origin: bottom right;
        -ms-transform-origin: bottom right;
        -o-transform-origin: bottom right;
        transform-origin: bottom right;
      }
      .span-right::after {
        content: '';
        position: absolute;
        top: 0.6rem;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #40649d;
        z-index: -1;
        -webkit-transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        -moz-transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        -ms-transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        -o-transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        transform: scale(1.1,1.3) perspective(.2em) rotateX(-1.9deg);
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
        -o-transform-origin: bottom left;
        transform-origin: bottom left;
      }
    }
複製代碼