css实现一个梯形_css 梯形

尝试用css实现一个梯形标签页

1.通过3D形变来实现

试想在现实的三维世界中旋转一个矩形。由于透视的关系，我们最终看到的二维图像往往就是一个梯形！因此，我们可以在CSS 中用3D 旋转
来模拟出这个效果：

.wrap {
    width: 100%;
    height: 100%;
}
.tab {
    width: 300px;
    height: 80px;
    position: relative;
    margin: 100px auto;
    font-size: 60px;
    text-align: center;
    background-color: cornflowerblue; 
    transform: perspective(.5em) rotateX(5deg);
}

整个元素应用3D 变形的，因此它上面的文字也变形了。对元素使用了3D变形之后，其内部的变形效应是“不可逆转”的

如果我们想发挥3D 变形的功能来生成梯形，唯一可行的途径就是把变形效果作用在伪元素上。

2.文本不变形的梯形

.tab {
    width: 300px;
    height: 80px;
    position: relative;
    margin: 100px auto;
    font-size: 60px;
    text-align: center;
}
 
.tab::before {
    content: ''; /* 用伪元素来生成一个矩形 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: perspective(.5em) rotateX(5deg);
}

应用变形效果会让这个元素以它自身的中心线为轴进行空间上的旋转。因此，元素投射到2D 屏幕上的尺寸会发生多种变化，如图3-44 所示：它的宽度会增加，它所占据的位置会稍稍下移，它在高度上会有少许缩减，等等。这些变化导致它在设计上很难控制。

为了让它的尺寸更好掌握，我们可以为它指定transform-origin:bottom;，当它在3D 空间中旋转时，可以把它的底边固定住

.tab::before {
    content: ''; /* 用伪元素来生成一个矩形 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform-origin: bottom; */
    transform: perspective(.5em) rotateX(5deg);
}

现在它看起来就直观多了，只有高度会发生变化。不过这样一来，高度的缩水会变得更加显眼，因为现在整个元素是转离屏幕前的观众的；而在之前，元素的上半部分会转向屏幕后面，下半部分会转出屏幕。相比之下，在3D 空间中，之前的元素总体上是离观众更近的。

垂直方向上的缩放程度（也就是scaleY() 变形属性）在达到130% 左右时刚好可以补足它在高度上的缩水：

.tab::before {
    content: ''; /* 用伪元素来生成一个矩形 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform-origin: bottom;
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
}

3. 梯形标签

<div class="wrap"> 
        <div class="nav">
            <a>tab1</a>
            <a>tab2</a>
            <a>tab3</a>
            <a>tab4</a>
        </div>
    </div>

.wrap {
    width: 100%;
    height: 100%;
}
.nav {
    width: 300px;
    height: 80px;
    position: relative;
    margin: 100px auto;
    font-size: 60px;
    text-align: center;
}
 
a {
    position: relative;
    display: inline-block;
    padding: .3em 1em 0;
    }
a::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    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;
}

4. 修改选转边，可以得到不同的梯形

transform-origin: left;

transform-origin: top;