10、平行四边形

1、嵌套元素方案

在外层嵌套一层元素，对其进行skew()变形，然后对内容元素进行反向的skew()变形，从而抵消嵌套元素的变形。

#a { transform: skew(-45deg); }
#a>p { transform: skew(45deg); }

---

2、伪元素方案

实现原理在于将背景应用的伪元素上面，然后再对伪元素进行变形，并将其置于内容下方。这样就不会产生因元素变形导致内容跟着变形的情况。

#a{
    position: relative;
}
#a:before{
    content: "";
    position: absolute;
    top: 0;left: 0;right: 0;bottom: 0; // 所有位置的偏移都设置为0，让伪元素能够自适应主元素的尺寸。
    z-index: -1; // 将伪元素的堆叠层次推到主元素之后。
    background: tan;
    transform: skew(-45deg);
}

这种技巧不仅仅适用于skew()变形，还可以适用其他任何样式的变形。只要当出现需要变形但不影响内容元素的时候，就可以使用这种技巧。