• Clip-path: Indicates a clipping path. Enclosed areas are filled with colors

  • circle(50% at 50% 50%);

The first 50% is the radius, which is 100px*50%=50px

The second and third 50% are X and Y coordinates, centered at (50px,50px)

  • ellipse(30% 50% at 50% 50%);

The first 30% is the length of the X-axis, which is 100px*30%=30px

The second 50% is the length of the Y-axis, which is 100px*50%=50px

The third and fourth 50% are X and Y coordinates, with the center of the ellipse at (50px,50px)

  • polygon(50% 0%, 0% 100%, 100% 100%);: each.The partition is one coordinate, and eventually all coordinates are connected in order
<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>The beauty of CSS art</title>
    <style>
        .figure-box {
            display: flex;
            flex-wrap: wrap;
        }

        li {
            margin: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        /* clip-path Clipping path */
        / * are * /
        .circle {
            clip-path: circle(50% at 50% 50%);
        }

        / * * / ellipses
        .ellipse {
            clip-path: ellipse(30% 50% at 50% 50%);
        }

        /* Pentagram */
        .star {
            clip-path: polygon(50% 0%.61% 35%.98% 35%.68% 57%.79% 91%.50% 70%.21% 91%.32% 57%.2% 35%.39% 35%);
        }

        /* Triangle */
        .triangle {
            clip-path: polygon(50% 0%.0% 100%.100% 100%);
        }

        / * * / diamond
        .rhombus {
            clip-path: polygon(50% 0%.100% 50%.50% 100%.0% 50%);
        }

        / * trapezoidal * /
        .trapezoid {
            clip-path: polygon(20% 0%.80% 0%.100% 100%.0% 100%);
        }

        /* Parallelogram */
        .parallelogram {
            clip-path: polygon(25% 0%.100% 0%.75% 100%.0% 100%);
        }

        /* Regular pentagon */
        .pentagon {
            clip-path: polygon(50% 0%.100% 38%.82% 100%.18% 100%.0% 38%);
        }

        /* Left arrow */
        .left-arrow {
            clip-path: polygon(40% 0%.40% 20%.100% 20%.100% 80%.40% 80%.40% 100%.0% 50%);
        }

        /* Right arrow */
        .right-arrow {
            clip-path: polygon(0% 20%.60% 20%.60% 0%.100% 50%.60% 100%.60% 80%.0% 80%);
        }

        Fork / * * /
        .close {
            clip-path: polygon(20% 0%.0% 20%.30% 50%.0% 80%.20% 100%.50% 70%.80% 100%.100% 80%.70% 50%.100% 20%.80% 0%.50% 30%);
        }

        / * * / information
        .message {
            clip-path: polygon(0% 0%.100% 0%.100% 75%.75% 75%.75% 100%.50% 75%.0% 75%);
        }
    </style>
</head>

<body>
    <div class="bruce flex-ct-x" data-title="Using clip-path to depict various shapes">
        <ul class="figure-box" style="--count: 12">
            <li class="circle" style="--index: 0"></li>
            <li class="ellipse" style="--index: 1"></li>
            <li class="star" style="--index: 2"></li>
            <li class="triangle" style="--index: 3"></li>
            <li class="rhombus" style="--index: 4"></li>
            <li class="trapezoid" style="--index: 5"></li>
            <li class="parallelogram" style="--index: 6"></li>
            <li class="pentagon" style="--index: 7"></li>
            <li class="left-arrow" style="--index: 8"></li>
            <li class="right-arrow" style="--index: 9"></li>
            <li class="close" style="--index: 10"></li>
            <li class="message" style="--index: 11"></li>
        </ul>
    </div>
</body>

</html>
Copy the code

Open with Codepen to view: links