如何创建一个半边界圆(只有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
}

这里有jsfiddle给你看.