web、html、css实现平行四边形、transform、skewX、skew

---

1、效果图

2、嵌套元素实现

☺☺☺css部分☺☺☺

body {
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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);
}

☺☺☺html部分☺☺☺

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

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

☺☺☺注解☺☺☺

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

---

3、伪类元素实现

☺☺☺css部分☺☺☺

body {
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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);
}

☺☺☺html部分☺☺☺

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

☺☺☺注解☺☺☺

使用伪元素一定要记得定位。