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;
      }
    }
复制代码

转载于:https://juejin.im/post/5cbadf98f265da0371299a99