用CSS绘制椭圆和多边形-一一网

clip-path：裁剪路径，被围住的区域用颜色填充
circle(50% at 50% 50%);

第一个50%是半径，为100px*50%=50px

第二、三个50%是X、Y坐标，圆心在(50px,50px)处

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

第一个30%是X轴半轴长度，为100px*30%=30px

第二个50%是Y轴半轴长度，为100px*50%=50px

第三、四个50%是X、Y坐标，椭圆心在(50px,50px)处

polygon(50% 0%, 0% 100%, 100% 100%);：每个,分割的是一个坐标，最终所有坐标按顺序连接

<!DOCTYPE html>
<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>CSS艺术之美</title>
    <style>
        .figure-box {
            display: flex;
            flex-wrap: wrap;
        }

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

        /* clip-path 裁剪路径 */
        /* 正圆 */
        .circle {
            clip-path: circle(50% at 50% 50%);
        }

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

        /* 五角星 */
        .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 {
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }

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

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

        /* 平行四边形 */
        .parallelogram {
            clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        }

        /* 正五边形 */
        .pentagon {
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        }

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

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

        /* 叉 */
        .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%);
        }

        /* 信息 */
        .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="使用clip-path描绘各种图形">
        <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>
复制代码