how to create a half bordered circle(only css, not js or even svg)?

Question

I am interested in creating something like the picture below. A counter box with a transparent background and a thin border, plus an icon in the bottom of that semi circle.

I made something like what I want, see below:

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

But the problem of this trick is that it can't have any transparent background. Any ideas?

Answer 1

use this code instead of using border 60px and setting width and height to zero.use width and height and border 1px;

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

here is jsfiddle for you to see.