In conclusion of this chapter, I want to introduce to you a very smart technique I learned from Patrick Denny (Head Noggin of Atomic Noggin Enterprises) for creating pie charts out of nothing but HTML and CSS.
The core of the technique focuses on how to obtain a slice of the chart of the desired size; this is achieved using the clip
and border-radius
properties on an HTML structure like this (we can create a new pie.html
file):
<div class="hold"> <div class="slice slice1"></div> </div>
First of all, we create a circle using a .slice
selector and the border-radius
property; we cut the circle in half.
.slice{ position: absolute; width: 200px; height: 200px; clip: rect(0px,100px,200px,0px); border-radius: 100px; }
Then, we cut off the other half of the circle by using the clip
property, as follows:
.hold { position: absolute; width: 200px; height: 200px; clip: rect(0px,200px,200px,100px); }