CS秘密花园：梯形标签

我们经常可以看到这种梯形标签：

要实现这种梯形标签，可以通过背景图像模拟，但是要额外请求图片数据；可以用在矩形旁带两个三角形来创建，但是也增加了额外的元素或额外的请求；可以通过边框来伪造，但是这样很不灵活，比如，需要额外添加边框时就有了冲突。

现有一个解决方案，通过3D旋转一个矩形，在视觉上将此矩形伪造成一个梯形：

图注：通过3D旋转创建一个梯形。上图：变换前；下图：变换后。

虽然上图通过旋转把一个矩形变为梯形，但其中的文本也跟着旋转了，而把文本旋转回来可行、但比较复杂，所以简便起见不能直接把旋转用在文本所在元素上。如此，唯一实用的方式就是利用3D变换来创建一个梯形，把这种变换应用到伪元素上：

.tab{        position:relative;        display:inline-block;        padding:.5em 1em .35em;        color:white; } .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; }

此效果视觉上等同于提到的基于border的技术，只是这里的语法更简洁。但是，当你开始给标签应用给一些样式的时候，这种技术的优势开始出现。例如：

nav > a {    position: relative;    display: inline-block;    padding: .3em 1em 0;}nav > a::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 white inset;    transform: perspective(.5em) rotateX(5deg);    transform-origin: bottom;}

如你所见，我们已经应用了背景、边框、圆角、和阴影，它们都是可行的。

另外，可以通过改变transform-origin的值为bottom left或bottom right，分别得到向左或向右倾斜的标签：

尽管它有这么多的有点，这种技术还是不够完美。它有一个非常重大的缺陷：侧边的角度取决于元素的宽度。因此。当处理不同的内容时，用相同的角度来得到梯形是非常棘手的。但是，对于宽度变化小的元素，它还是非常ok的，比如导航菜单，在这些情况下差异是难以察觉的。

【转载自：http://www.w3cplus.com/css3/css-secrets/trapezoid-tabs.html】