使用CSS的polygon属性画半圆环各个方向

CSS polygon()函数是一个图形函数，用于指定某种基本图形类型。polygon()函数用于定义一个多边形

.container{
        width: 50px;
        height: 50px;
        border: 13px solid #0c73fe;
        border-radius: 50px;
        /* 上半圆环 */
        clip-path: polygon(100% 50%, 0 50%, 0 0, 100% 0); 
        /* 下半圆环 */
        /* clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); */
        /* 左半圆环 */
        /* clip-path: polygon(50% 0, 100% 0, 100% 3600%, 50% 50%); */
        /* 左半圆环 */
        /* clip-path: polygon(50% 100%, 0 100%, 0 -3600%, 50% 50%); */
    }

border属性控制半圆环的厚度，width和height控制裕半圆环的大小

实现效果如下

这篇好文章是转载于：学新通技术网