圆

.circle {
            width: 100px;
            height: 200px;
            background-color: purple;
            border-radius: 50%;
        }

改变width``height大小即可改变圆的形状。

三角形

.triangle {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            /*left top right bottom*/
            border-bottom: 100px solid purple;
        }

将border-bottom中的bottom改为left、top、right即能得到不同方向的三角形

扇形

.sector {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom-color: purple;
            border-radius: 50%;
            transform: rotate(90deg);
        }

改变 transform: rotate(90deg)里面的度数即可改变扇形的朝向 梯形

.trapezoid {
            width: 70px;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 100px solid purple;

        }

将border-bottom中的bottom改为left、top、right即能得到不同方向的梯形

平行四边形

.parallelogram {
            width: 200px;
            height: 100px;
            background-color: purple;
            transform: skew(20deg);/*将元素沿着X轴倾斜20度*/
            margin: 50px;
        }

transform: skew(20deg);可以根据需要调整角度来改变平行四边形的形状