How to make arc shapes with CSS3?

Question

I\'m trying to achieve following look, with pure css:

Where each white

Answer 1

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;
}