平行四边形背景的制作

css3的skew可以制作平行四边形背景，总结2种用法：

1. 直接使用修饰样式，该元素的内容也会随之改变。可使用嵌套元素反修饰。

.div1>.div2{
        transform: skew(-40deg);
        -ms-transform:skew(-40deg);     /* IE 9 */
        -moz-transform:skew(-40deg);    /* Firefox */
        -webkit-transform:skew(-40deg); /* Safari 和 Chrome */
        -o-transform:skew(-40deg);

    }

.div2{

         transform: skew(40deg);
        -ms-transform:skew(40deg);     /* IE 9 */
        -moz-transform:skew(40deg);    /* Firefox */
        -webkit-transform:skew(40deg); /* Safari 和 Chrome */
        -o-transform:skew(40deg);

}

2.但是这样则必须要有一个嵌套元素,如果无法使用嵌套元素时,可使用伪元素,因为伪元素不包括内容.但是需要将该元素定义为position:relative,如下:

div{

    position:relative

}

div::before{

        content: '';
        position: absolute;
        top:0; right: 0;bottom: 0;left: 0;
        z-index: -1;
        background: red;
        transform: skew(-40deg);
        -ms-transform:skew(-40deg);     /* IE 9 */
        -moz-transform:skew(-40deg);    /* Firefox */
        -webkit-transform:skew(-40deg); /* Safari 和 Chrome */

        -o-transform:skew(-40deg);

}