<body>
    <div class="one">Equilateral triangle</div>
    <br>
    <div class="two">parallelogram</div>
    <br>
    <div class="three">circular</div>
    <br>
    <div class="four">trapezoidal</div>
    <br>
    <div class="five">The diamond</div>
    <br>
    <div class="six">The ellipse</div>
    <br>
    <div class="seven">semicircle</div>
    <br>
    <div class="eight">A pentagon consists of a triangle and a trapezoid<div class="eight-1"></div>
        <div class="eight-2"></div>
    </div>
    <div class="nine">A hexagon consists of one or two trapezoids<div class="nine-1"></div>
        <div class="nine-2"></div>
    </div>
</body>
Copy the code
         .one {   /* Equilateral triangle */
            width: 0;
            height: 0;
            /* border-left+border-right = 50+50=100 */
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            /* border-bottom specifies the height of the triangle h */
            border-bottom: 86.6 px. solid red;
        }

        .two {  /* Parallelogram */
            margin-left: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
            /* The css3 twist function rotates the axis X(horizontal) to clockwise and Y(vertical) to clockwise */
            transform: skewX(-50deg);
        }

        .three {  Round / * * /
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: pink;
        }

        .four {  / * trapezoidal * /
            width: 100px;
            height: 0;
            /* width+border-left+border-right; /* width+border-left+border-right
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;

            /* border-bottom specifies the height h */
            border-bottom: 100px solid red;
        }

        .five {   / * * / diamond
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotateZ(45deg) skew(30deg.30deg);
            margin-left: 100px;
        }

        .six {  /* Ellipse */
            width: 200px;
            height: 100px;
            border-radius: 50%;
            background-color: pink;
        }

        .seven {   / * semicircle * /
            width: 200px;
            height: 100px;
            border-radius: 100px 100px 0 0;
            background-color: pink;
        }

        .eight-1 {   /* Pentagon */
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid red;
        }

        .eight-2 {
            width: 100px;
            height: 0;
            /* Inverted trapezoid */
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

        .nine-1 {   /* Hexagon */
            width: 100px;
            height: 0;
            /* Trapezoid */
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

        .nine-2 {
            width: 100px;
            height: 0;
            /* Inverted trapezoid */
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
Copy the code