《CSS揭秘》：梯形标签页

梯形标签页

一直以来，在CSS里都没有简单的方式生成梯形标签页。常见的方案是使用背景图片或者伪元素。但是这两种方案使用起来不够灵活。比如标签大小改变，增加纹理背景时候，这两种方案就很难维护。

背景图片

本方案就是对标签页设置梯形的背景图片。
background: url(...)
缺点是如果梯形标签的宽度、高度、背景等有变化，就得重新切图。基本不能重用

伪元素

伪元素方案就是对元素设置before和after伪元素。对伪元素设置旋转等操作。

:before {
  transform: skewx(30deg);
}
:before {
  transform: skewx(-30deg);
}

缺点是如果要给梯形设置边框等样式，就会比较困难。

3D旋转

我们想象，一个平面的矩形，垂直于平面进行旋转，投射在2D平面内就是一个梯形。
transform: perspective(.5em) rotateX(5deg)
另外，由于默认是已矩形中轴为轴旋转，这样的到的梯形的宽度会增加，高度会减少，并且位置会下移。这样就需要为其指定旋转轴。同时设置Y轴的缩放来使其高度尽量不发生变化。

transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;

即使是这样，由于斜边的角度依赖于元素的宽度，如果标签不是等宽，就会造成一些差异。但是标签页一般用于导航，这种方法可以满足大部分场景。