[CSS揭秘]平行四边形

技巧：通过变形属性对容器的形状进行变形，但是保持其内容不变形。

场景：通过skew()变形属性对一个按钮形状的平行四边形进行斜向拉伸。

有几套备选方案：

1. 嵌套元素方案

外部容器元素进行skew()变形，再对内部内容区域元素进行一次反向的skew()变形，这样内容区域会保持原来的形状。

 

2. 伪元素方案（二个）

通过在元素两边添加两个三角形的伪元素来拼接实现一个斜向拉伸的平行四边形。

 

3. 伪元素方案（一个）

把所有的样式（背景，边框等）都应用到伪元素之上，而且对伪元素进行变形。

这个技巧适用于任何变形样式：只想变形一个元素而不想变形元素的内容。

 

技巧使用场景：

1. 多重背景

2. 边框内圆角

3. 多重边框

 

参考案例地址

play.csssecrets.io/parallelograms

play.csssecrets.io/parallelograms-pseudo