css简单绘图

	div {
            width: 100px;
            height: 100px;
        }
        div.circle {
            clip-path: circle(50% at 50% 50%);
            background-color: blue;
        }
        div.ellipse {
            clip-path: ellipse(50%  30%);
            background-color: red;
        }

        div.triangle {
            background-color: yellow;
            clip-path: polygon(50% 0, 0 100%, 100% 100%);
        }
    <div class="circle"></div>
    <div class="ellipse"></div>
    <div class="triangle"></div>

clip-path: circle(50% at 50% 50%);
画园，第一个参数是半径，at 后面的2个参数是圆心坐标，区域的左上角是原点，x轴向右，y轴向下，这种坐标参照下面也一样。
clip-path: ellipse(50% 30%);
画椭圆，2个参数分别是椭圆的2条直径对应的百分比
clip-path: polygon(50% 0, 0 100%, 100% 100%);
绘制自定义多边形，这里画了一个等腰三角形，逗号分隔的是三角形的三个顶点坐标，坐标直接空格分开