How To Make Arc Shapes With Css3?

I'm trying to achieve following look, with pure css: Where each white arc is a different element, say span. I know we can make round shapes with css, but how can it be turned into

Solution 1:

With the following HTML:

<divid="arcs"><div><div><div><div></div></div></div></div></div>

And the CSS:

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

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

<divid="arcs"><div><div><div><div></div></div></div></div></div>

JS Fiddle demo.

Solution 2:

SVG Approach:

I would recommend you to use SVG to draw such shapes:

In the example below I've used SVG's path element to draw an arc. This element takes single attribute d to describe the shape structure. d attributes takes a few commands and corresponding necessary parameters.

I've used only 2 path commands:

• M command is used to move the pen to a specific point. This command takes 2 parameters x and y and usually our path begins with this command. It basically defines starting point of our drawing.
• A command which is used to draw curves and arcs. This commands takes 7 parameters to draw an arc / curve. A detailed explanation of this command is Here.

Screenshot:

Useful Resources:

• Specification
• MDN

Working Example:

svg {
  width: 33%;
  height: auto;
}

<svgviewBox="0 0 300 300"xmlns="http://www.w3.org/2000/svg"><defs><gid="arcs"fill="none"stroke="#fcfcfc"><pathd="M80,80 A100,100,0, 0,0 80,220"stroke-width="4" /><pathd="M90,90 A85,85,0, 0,0 90,210"stroke-width="3.5" /><pathd="M100,100 A70,70,0, 0,0 100,200"stroke-width="3" /><pathd="M110,110 A55,55,0, 0,0 110,190"stroke-width="2.5" /></g></defs><rectx="0"y="0"width="300"height="300"fill="#373737" /><usexlink:href="#arcs" /><usexlink:href="#arcs"transform="translate(300,300) rotate(180)" /></svg>