标题栏怎么实现css,css实现标题栏梯形效果

如图要实现这里标题栏效果，可以使用css而不用图片

项目总浏

实时监控

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

}

}

复制代码