html - How to make arc shapes with CSS3? -

i'm trying achieve following look, pure css:

where each white arc different element, span. know can make round shapes css, how can turned arc sort of shape?

with following html:

<div id="arcs">     <div>         <div>             <div>                 <div></div>             </div>         </div>     </div> </div> 

and css:

#arcs div {     border: 2px solid #000; /* 'strokes' of arc */     display: inline-block;     min-width: 4em; /* width of innermost element */     min-height: 4em; /* height of innermost element */     padding: 0.5em; /* spacing between each arc */     border-radius: 50%; /* making elements 'round' */     border-top-color: transparent; /* hiding top border */     border-bottom-color: transparent; } 

#arcs div {    border: 2px solid #000;    /* 'strokes' of arc */    display: inline-block;    min-width: 4em;    /* width of innermost element */    min-height: 4em;    /* height of innermost element */    padding: 0.5em;    /* spacing between each arc */    border-radius: 50%;    /* making elements 'round' */    border-top-color: transparent;    /* hiding top border */    border-bottom-color: transparent;  }

<div id="arcs">    <div>      <div>        <div>          <div></div>        </div>      </div>    </div>  </div>

js fiddle demo.