css3倾斜的平行四边形,CSS3技巧之形状（平行四边形）

上一小节给大家分享了各种椭圆的实现方法，此时我们来说一下平行四边形的实现方法。

平行四边形

基本变形属性transform有很多，接下来我们用到哪一个说哪一个。

我们一般用skew属性来对矩形进行斜向拉伸，变成平行四边形，但是如果直接对元素使用的话，它里面的内容也会跟着斜向变动。

嵌套元素方案

对容器内容再应用一次反向的skewX()变形，从而抵消容器的变形效果

来看一下html和css具体代码

伪元素方法

上面方法需要添加额外的HTML元素。这里提供一个不用添加额外的HTML元素的。

这种方法的思路是把所有的样式(背景、边框等)应用到伪元素上，然后对伪元素进行变形。

要注意几点：

一是要给宿主元素设置position: relative，并给伪类元素设置position: absolute，且偏移量都为0，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。

二是伪元素生成的方块是重叠在内容之上的，一旦设置背景，就会遮住内容，应该设置z-index: -1或者更小的数，宿主没有设置z-index默认为0；

想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。

就这样一个平行四边形效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！