前置知识：基本的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;
}