梯形标签页

3D 变形方案

一个矩形，用 3D 旋转可模拟出梯形

但 3D 变形对与内部来说是不可逆的，所以只能用伪元素

.box {
    position: relative;
}
.box::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: perspective(10px) rotateX(5deg);
}

但还存在一些小问题，看下图

1. 位置下移
2. 高度有少许缩减

.box::after {
    /* 把底边固定住，使位置对齐 */
    transform-origin: bottom;
}

.box::after {
    /* 放大来弥补高度的缩减 */
    transform: perspective(10px) rotateX(5deg) scale(1.3);
}

所以最终代码是

.box {
    position: relative;
}
.box::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    transform: perspective(10px) rotateX(5deg) scale(1.3);
    transform-origin: bottom;
}

变换 transform-origin 可以变换形状

.box {
	transform-origin: left;
}

缺点

斜边的角度依赖于元素的宽度

当元素的内容长度不等时，会出现斜度不一致的问题，不过对于宽度变化不大的情况还是适用的