《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;

即便是这样，因为斜边的角度依赖于元素的宽度，若是标签不是等宽，就会形成一些差别。可是标签页通常用于导航，这种方法能够知足大部分场景。