CSS揭秘：10.平行四边形

前置知识：基本的css变形

一、平行四边形

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

css 复制代码

transform: skewX(-45deg);

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

二、嵌套方案

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

css 复制代码

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

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

三、伪元素方案

还有一种办法是创建一个伪元素，将变形的样式都转移至伪元素上，这样就不会影响原来的内容了。

为了让伪元素的大小和主元素一致，我们可以这样实现：

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

css 复制代码

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

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

css 复制代码

.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轴偏移量。若仅指定一个参数，则默认应用于水平方向
内容保护：可采用嵌套反向倾斜或伪元素技术，确保内容不受容器变形影响