How to create a half-border circle (only css, not js or even svg)?

Question

I am interested in creating something like the picture below. A box with a transparent background and a thin frame, as well as an icon at the bottom of this semicircle.

I did 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 with this trick is that it cannot have a transparent background. Any ideas?

Answer 1

use this code instead of using a 60px border and set the 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 the jsfiddle to view.

Answer 2

I think this violin should help you.

<div class="wrapper">
    <div class="chartBottom"></div>
    <div class="icon">Icon</div>
</div>

.chartBottom {
    width:120px;
    height:120px;
    border:1px solid #c45;
    border-bottom:1px solid transparent;
    border-radius: 60px;
}
.icon {
    position: relative;
    height: 40px;
    width: 60px;
    top: -30px;
    left: 30px;
    text-align: center;
    border: 1px solid green;
}
.wrapper {
    background-color: rgba(0,0,0,0.5);
    padding: 3px;
    width: 126px;
}

Answer 3

.circleDiv{

         width:120px;
         height:120px;
         border-right:1px solid white;
         border-top:1px solid white;
         border-left:1px solid white;
         border-bottom:1px solid transparent;
         border-radius: 50%;
    }

Answer 4

It is very easy to add an icon with an absolute location inside the container with a relative location ( see script ).

As for making it responsive, I recommend using media queries to adjust the values ​​to keep the design tight (not included in the violin).

http://jsfiddle.net/1gtss907/5/

<div class="container">
  <div class='chartBottom'>
    <h4>56</h4>
    <i class="fa fa-thumbs-up"></i>
  </div>
  <p>Projects done this year</p>
</div>

body {
  background: #222;
  font-family: "Helvetica Neue", sans-serif;
}

.container {
  padding: 8em;
  text-align: center;
}

.chartBottom{
  border:1px solid #1abc9c;
  border-bottom:1px solid transparent;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  height: 150px;
  line-height: 150px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 150px;
}

h4 {
    font-size: 55px;
    font-weight: 900;
    margin-top: 0.75em;
}

p {
    color: #999; 
    font-size: 15px;
    font-weight: 300;
    margin: 5px auto 0;
    width: 100px;
}

i {
    color: #16a085;
    opacity: 0.75;
    position: absolute;
    bottom: 0;
    left: 45%;
}