椭圆形进度条||饼形图

Question

如何仅使用HTML＆CSS创建受监管的椭圆进度条？

My jsfiddle try有效，但外观有所不同（没有内部\外部边框或填充）

<svg viewBox="0 0 64 64" class="pie">
   <circle class="background" r="25%" cx="50%" cy="50%"></circle>
   <circle class="chart" r="25%" cx="50%" cy="50%" stroke-dasharray="85 100"></circle>
</svg>

Answer 1

我不确定这是您要寻找的东西，但看起来不会疼吗？

这是我的示例： https://jsfiddle.net/b3h0tqye/57/

我只是更改了以下几行：

<circle class="background" r="27%" cx="50%" cy="50%" style="stroke-width:1;"></circle>
 <circle class="background" r="22%" cx="50%" cy="50%" style="stroke-width:1;"></circle>