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()變形,還可以適用其他任何樣式的變形。只要當出現需要變形但不影響內容元素的時候,就可以使用這種技巧。