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()变形，还可以适用其他任何样式的变形。只要当出现需要变形但不影响内容元素的时候，就可以使用这种技巧。
网友评论