css - 如何创建一个半边框的圆圈(只有 css，不是 js 甚至 svg)？

Question

我有兴趣创建如下图所示的内容。一个具有透明背景和细边框的计数器框，在该半圆的底部加上一个图标。

我做了我想要的东西，见下文:

.chartBottom{
   width:0;
   height:0;
   border:60px solid #c45;
   border-bottom:60px solid transparent;
   border-radius: 60px;
 }

但是这个技巧的问题是它不能有任何透明背景。有什么想法吗？

Answer 1

使用此代码而不是使用边框 60px 并将宽度和高度设置为零。使用宽度和高度以及边框 1px；

.chartBottom{
    width:60px;
    height:60px;
    border:1px solid #c45;
    border-bottom:1px solid transparent;
    border-radius: 60px
}

here是jsfiddle给你看。