css3实现div倾斜

CSS3实现DIV倾斜非常简单，只需要使用一个CSS属性transform即可实现。transform属性可以对元素进行旋转、缩放、倾斜等操作。

    div{
        -webkit-transform: skew(30deg);
        transform: skew(30deg);
    }

上述代码将DIV元素向右倾斜30度，也可以将元素向左倾斜，只需使用负值即可。

    div{
        -webkit-transform: skew(-30deg);
        transform: skew(-30deg);
    }

当然，transform属性还可以组合使用，如下代码将DIV元素先向右倾斜30度，再向上倾斜30度。

    div{
        -webkit-transform: skew(30deg,-30deg);
        transform: skew(30deg,-30deg);
    }

除了使用transform属性，还可以使用css3的伪元素:before和:after来实现DIV倾斜效果，这种方法的好处是可以不增加元素，实现更轻量的页面。

    div:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        transform: skew(-30deg);
        z-index: -1;
    }

上述代码将DIV元素的伪元素:before进行倾斜，通过设置z-index属性，将其放到背景中实现倾斜效果。

总之，CSS3实现DIV倾斜非常简单，可以通过transform属性或伪元素:before和:after轻松实现。这种效果可以用于网站设计中视觉效果的增加，让页面在视觉上更加动感和生动。