Pie charts

Using pseudo-elements

1. First we create our circle, with an height and width and a border-radius.
2. We add a background to our circle and a background-image with an other color who will be hided by our pseudo-elements.
3. We create our pseudo-elements with a margin-left 50% so that he can cover the half of our circle, and we add a background-color inherit so he takes the same color than his parent (yellowgreen).
4. We now add a border-radius to our pseudo-elements so now he has the exact same shape of his parent.
5. We add a transform-origin to our pseudo-elements so that he could rotate around the circle center.
6. Finally we add transform rotate to turn the circle and show the brown hided color.

More than 50%

1. With the old method if try tu show more 50% it won't works.
2. To do that we can simply inverted the color of our pseudo-elements.
3. Change the background-color inherit by background #655 and it should be works.
4. We can add some animation ;).