平行四边形

困难产生原因

• 平行四边形只要 skew() 即可完成，但存在文字内容一起倾斜的问题

嵌套元素方案

可以对内容反向 skew() 变形一次，从而抵消容器的变形效果，但需要多一层 HTML

<button>
    <div>click me</div>
</button>

button { transform: skew(-45deg); }
button div { transform: skew(45deg); }

伪元素方案（更好）

把所有样式（背景、边框等）应用到伪元素上，然后再对伪元素进行变形

.box {
    position: relative;
    width: 100px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}
.box::after {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #58a;
    transform: skew(-45deg);
}

伪元素的技巧不仅适用于平行四边形，还适用于其他形状变形，但内容不变形的情况，以下是代码总结

.box {
    position: relatice; /* 需要给伪元素提供父级定位 */
    /* 宽高、内边距、外边距、内容样式等 */
}
.box::after {
    content: '';
    z-index: -1; /* 伪元素在宿主元素上层，为了不遮挡内容，层级要下移 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* 和宿主元素一样大小 */
    /* 背景、边框等样式 */
    /* 变形 */
}