title: how to create a half bordered circle(only css, not js or even svg)?
body: <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/5VSa0.png" alt="enter image description here"></p>
  
  <p>I made something like what I want, see below:
  </p>
  
  <pre><code>.chartBottom{
     width:0;
     height:0;
     border:60px solid #c45;
     border-bottom:60px solid transparent;
     border-radius: 60px;
   }
  </code></pre>
  
  <p>But the problem of this trick is that it can't have any transparent background. Any ideas?</p>