CSS3实现平行四边形

关键部分就一行代码: transform: skew(-25deg);

由于skew会带动其中的子元素一起倾斜，我们需要在内容区外面再放一个div，设置相反的度数，抵消掉倾斜效果。效果及代码如下:

CSS3实现平行四边形

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>平行四边形</title>
    <style>
        .skew {
            width: 200px;
            height: 100px;
            background: lightgreen;
            line-height: 100px;
            margin: 0 auto;
            text-align: center;
            transform: skew(-25deg);
        }

        .skew-main {
            transform: skew(25deg);
        }
    </style>

</head>
<body>
　　<div class="skew">
    　　<div class="skew-main">平行四边形</div>
　　</div>
</body>
</html>