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

我有兴趣创建类似下图的东西。一个带有透明背景和细边框的计数器框，在半圆形底部还有一个图标。

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

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

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

最佳答案

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

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

here 是 jsfiddle 供您查看。

关于css - 如何创建一个半边框圆(只有 css，而不是 js 甚至 svg)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26190344/