CSS3 Pie Chart

A SASS mixin for pure CSS pie charts.

Usage

Based on the following HTML/HAML structure:

#pie-chart
  - 3.times do
    .pie-chart-section

use the pie-chart() mixin in your SASS file like this:

$sections: 60 red, 30 green, 10 blue

#pie-chart
  +pie-chart($sections, $diameter: 400px)

with the following parameters:

$sections   	  	// percentage and color of each section
$diameter   	  	// in px
$initial-rotation 	// in degrees (default is 0°)
$gradient   	 	// if you want a radial gradient (default is true)

Browser Support

Safari	Chrome	Firefox	IE9	IE10
✔	✔	✔	✖	✔