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