怎么实现一个平行四边形

skewX函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个<transform-function>数据类型。
子元素倾斜的角度值和父元素倾斜的角度值一样，但是方向不同，在程序中-和+表示方向，正方向时省略+符号。左平行与右平行通过改变父子元素的方向实现。

 

方法一：嵌套元素实现

<div class="box">
    <div class="left_p">
        <div>左平行</div>
    </div>

    <div class="right_p">
        <div>右平行</div>
    </div>
</div>

.box {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.left_p,
.right_p {
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

.left_p {
    transform: skewX(-45deg);
}

.right_p {
    transform: skewX(45deg);
}

.left_p>div,
.right_p>div {
    width: 360px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: #ffffff;
    font-size: 70px;

}

.left_p>div {
    transform: skewX(45deg);
}

.right_p>div {
    transform: skewX(-45deg);
}

方法二：伪类元素实现

<div class="box">
    <div class="left_p">左平行</div>
    <div class="right_p">右平行</div>
</div>

.box {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.left_p,
.right_p {
    width: 360px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    position: relative;
    color: #FFFFFF;
    font-size: 70px;
}

.left_p::before,
.right_p::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    z-index: -1;
}

.left_p::before {
    transform: skew(-45deg);
}

.right_p::before {
    transform: skew(45deg);
}