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】