前置知识：基本的css变形

一、平行四边形

要实现一个平行四边形，可以使用CSS的skew变形属性来倾斜元素。

transform: skewX(-45deg);

图-1显示容器和内容都出现了倾斜，该如何解决这个问题？

二、嵌套方案

我们通过将内容嵌套 div 并使用 反向skew变形，抵消容器的影响。

.box {transform: skewX(-45deg);.content {transform: skewX(45deg);}
}

虽然我们实现了目标效果，但如此一来，原本仅需单一元素即可表达的内容，现在却需要额外增加一个元素。

三、伪元素方案

还有一种办法是创建一个伪元素，将变形的样式都转移至伪元素上，这样就不会影响原来的内容了。
为了让伪元素的大小和主元素一致，我们可以这样实现：

• 设置主元素 position: relative;
• 同时将伪元素的各方向偏移量设置为 0 以达到贴合主元素。

.button {  position: relative;    /* 其他的文字颜色、内边距等样式…… */  
}  
.button::before {   content: '';    position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  
}

为了确保伪元素位于主元素下方而不产生遮挡，需要将伪元素的 z-index 设为 -1。

.button {  position: relative;    /* 其他的文字颜色、内边距等样式…… */  
}  
.button::before {   content: '';    position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index: -1;transform: skewX(-45deg);background-color: xxx;
}

我们最终实现的视觉效果与嵌套元素完全相同。此外，这种伪元素方案还可用于其他图形效果，例如配合旋转属性实现菱形容器。

要点回顾

• skew变形：通过skew()实现元素倾斜，接收两个参数分别控制x轴和y轴偏移量。若仅指定一个参数，则默认应用于水平方向
• 内容保护：可采用嵌套反向倾斜或伪元素技术，确保内容不受容器变形影响