html梯形选项卡,梯形标签页

梯形是用CSS难以生成的形状，使用伪元素可行，但不灵活。

Sooooooooo,我们可以使用CSS中的3D旋转(由于透视的关系，我们最终看到的二维图像就是一个梯形！)来模拟出这个效果：

transform: perspective(.5em) rotateX(5deg);

使用3D变形内部的变形效应是不可逆转的

因此，我们应该采用将变形效果作用在伪元素上的方法：

梯形标签页

.tab{

display: block;

position: relative;

margin:0 auto;

padding: .3em;

width: 5em;

font-size: 2em;

text-align: center;

text-decoration: none;

color:#fff;

}

.tab::before{

content: '';

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

z-index: -1;

background: #58a;

transform: scaleY(1.3) perspective(.5em) rotateX(5deg);

transform-origin: bottom;

}

Click me

使用这种技巧的标签应用样式就会很灵活：

.tabs{

display: block;

position: relative;

margin:0 auto;

padding: .3em;

width: 5em;

font-size: 2em;

text-align: center;

text-decoration: none;

color:#fff;

}

.tabs::before{

content: '';

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

z-index: -1;

background: #ccc;

background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));

border: 1px solid rgba(0,0,0,.4);

border-bottom: none;

border-radius: .5em .5em 0 0;

box-shadow: 0 .15em width inset;

transform: scaleY(1.3) perspective(.5em) rotateX(5deg);

transform-origin: bottom left;

}

效果图