Page 103 - css揭秘

尽管这个技巧为我们节省了背景图片所产生的额外 HTTP 请求，并且
可以很容易地适应不同的宽度，但它还不是最佳方案。它用光了仅有的两个
伪元素，而且在样式层面上也不够灵活。举个例子，当我们要给梯形标签页
增加一圈边框、一层纹理背景，或者要在其顶部设置圆角时，就只能自求多
福了。

由于实现梯形的所有常见技巧都比较杂乱，或者很难维护，我们在网
上看到的绝大多数标签页都不是倾斜的——尽管现实世界里的标签往往是斜
的。有没有一种合理而又灵活的方法来实现梯形的标签页呢？

图 3-40
在 Cloud9 IDE（http://c9.io）中，
每个打开的文档都会分配一个梯
形标签页

图 3-41
css-tricks.com 网站的早期设计也
采用了梯形标签页，不过只有一
条边是倾斜的

解决方案

如果有一组 2D 变形属性可以生成一个梯形，我们就可以利用“平行四
边形”涉及的技巧来达到目的。然而遗憾的是并没有。
试想在现实的三维世界中旋转一个矩形。由于透视的关系，我们最终看
到的二维图像往往就是一个梯形！谢天谢地，我们可以在 CSS 中用 3D 旋转
来模拟出这个效果：

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

你可以在图 3-42 中看到这行代码所生成的梯形。当然，由于我们是对

72 第 3 章 形状

඀ࠡ JOEC