梯形标签页

梯形是用CSS难以生成的形状，使用伪元素可行，但不灵活。
Sooooooooo,我们可以使用CSS中的3D旋转（由于透视的关系，我们最终看到的二维图像就是一个梯形！）来模拟出这个效果：

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

使用3D变形内部的变形效应是不可逆转的

因此，我们应该采用将变形效果作用在伪元素上的方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>梯形标签页</title>
    <style type="text/css" media="screen">
        .tab{
            display: block;
            position: relative;
            margin:0 auto;
            padding: .3em;
            width: 5em;
            font-size: 2em;
            text-align: center;
            text-decoration: none;
            color:#fff;      
        }
        .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;
        }
    </style>
</head>
<body>
    <a href="" class="tab">Click me</a>
</body>
</html>

使用这种技巧的标签应用样式就会很灵活：

.tabs{
            display: block;
            position: relative;
            margin:0 auto;
            padding: .3em;
            width: 5em;
            font-size: 2em;
            text-align: center;
            text-decoration: none;
            color:#fff;      
        }
.tabs::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 width inset;
            transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
            transform-origin: bottom left;
        }

效果图

梯形标签页

推荐阅读更多精彩内容