css多边形区域显示

可以使用css中的clip-path属性将内容区域裁剪成圆形、椭圆形、多边形。代码如下：

<style>
        .box {
            width: 200px;
            height: 200px;
            margin: 10px 40px;
            background: #4FA6E5;
        }
        /* 圆 ：必须是正方形，否则长边无裁剪*/
        .round {
            clip-path: circle(50%);  
        }
        /* 椭圆 */
        .oval {
            clip-path: ellipse(30% 20% at 50% 50%);
        }
        /* 多边形 */
        .polygon {
            /* clip-path: polygon(0 0, 30px 100%, calc(100% - 30px) 100%, 100% 0); */
            clip-path: polygon(
                30px 0,
                calc(100% - 30px) 0,
                100% 50%,
                calc(100% - 30px) 100%,
                30px 100%,
                0 50%
            );

        }
        /* 圆角 */
        .rounded-corners {
            clip-path: inset(25% 0 round 0 25%);  
        }
        /* 缺角 */
        .missing-corner {
            clip-path: polygon(
                30px 0,
                calc(100% - 30px) 0,
                100% 30px,
                100% calc(100% - 30px),
                calc(100% - 30px) 100%,
                30px 100%,
                0 calc(100% - 30px),
                0 30px
            );
        }
    </style>
    <div class="box polygon"></div>
    <div class="box round"></div>
    <div class="box oval"></div>
    <div class="box rounded-corners"></div>
    <div class="box missing-corner"></div>

效果如下：