平行四边形效果

[wasaisai]

难题：
transform: skewX(-45deg);对矩形进行斜向拉伸，会导致它的内容也发生了斜向变形。

解决方案：

1. 我们可以对内容再应用一次反向的skew（）变形，从而抵消容器的变形效果。这意味着我们将使用一层额外的HTML元素来包裹内容：

Click me

.button {transform: skewX(-45deg);} .button > div { transform: skewX(45deg);} ` 2. 另一种思路是把所有样式（背景、边框等）应用到伪元素上，然后再对伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会收到变形的影响。

• 我们希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是尤其内容来决定的。一个简单的办法是给宿主元素应用position：relative样式，并未伪元素设置position：absolute，然后再把所有偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸：
  .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-inde: -1; background: #58a; transform: skew(45deg);

NOTE：

1. 这个技巧不仅对skew（）变形来说很有用，还使用于其他任何变形样式，当我们向变形一个元素而不想变形它的内容时就可以用到它。举个例子，我们把这个技巧针对rotate（）变形样式稍稍调整一下，再用到一个正方形元素上，就可以很容易得到一个菱形

2. 这个技巧的关键在于，我们利用伪元素以及定位属性产生了一个方块，然后对伪元素设置样式，并将其放置在其宿主元素的下层、

3. 这个方法可以用来实现边框内圆角的效果

4. 这个方法可以用来为某一层背景单独设置opacity这样的属性

5. 当不能使用“多重边框”中的技巧时， 这个方法可以用一种更加灵活的方式来模拟多层边框。比如，我们需要多层的虚线边框，或者需要在 多重边框之间留有透明空隙时。