CSS3实现平行四边形

1、代码

.box {
        position: relative;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-left: 60px;
    }
 .box::after {
        content: "";
        background-color: rgb(22, 189, 189);
        transform: skewX(-35deg);
        z-index: -1;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

平行四边形

2、运行结果

3、提示

（1）如果将旋转直接加在.box 上，文字也会随之旋转。所以可以用两层标签或者伪元素来实现。

（2）transform 该属性允许我们对元素进行旋转、缩放、移动或倾斜