难题

对元素应用 transform: skewX(45deg) 后，虽然得到了一个平行四边形，但是会导致它的内容也倾向变形。如何使得只让容器的形状倾斜，而保持内容不变？

嵌套元素方案

我们可以对内容再应用一次反向的 skew() 变形，从而抵消容器的变形效果。但是我们不得不使用一层额外的 HTML 元素来包裹内容，比如用一个 div：

伪元素方案

另一种思路是 把所有样式（背景、边框等）应用到伪元素上，然后再 对伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会受到变形的影响。

这个技巧不仅对 skew() 变形来说很有用，还适用于其他任何变形样式，当我们想 变形一个元素而不想变形它的内容时 就可以用到它。

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