纯css写1/4圆,1/2圆(半圆)、3/4圆(270度)、进度圆/进度条

注:1/4圆,1/2圆(半圆)、3/4圆(270度)的实现都使用到了clip属性,且属性的值必为自身宽度的一半。

效果

  • 1/4圆、1/2圆


    image.png

270度圆

image.png

进度圆/进度条

image.png

全部代码如下







你可能感兴趣的:(纯css写1/4圆,1/2圆(半圆)、3/4圆(270度)、进度圆/进度条)