================================================================

dabblet.css

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-pie-chart.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

ul.piechart {
padding:0;
margin:0 auto;
list-style:none;
width:340px;
height:340px;
overflow:hidden;
border-radius:320px;
position:relative;
}
ul.piechart li {
width:300px;
height:300px;
background:transparent;
position:absolute;
left:170px;
top:-130px;
overflow:hidden;
-webkit-transform-origin:0 300px;
-moz-transform-origin:0 300px;
-ms-transform-origin:0 300px;
-o-transform-origin:0 300px;
transform-origin:0 300px;
}


ul.piechart li:nth-child(1) {
-webkit-transform: skewY(20deg); 
-moz-transform: skewY(20deg); 
-ms-transform: skewY(20deg); 
-o-transform: skewY(20deg); 
transform: skewY(20deg);
}
ul.piechart li:nth-child(1) b {background:#c00;
-webkit-transform: skewY(-20deg);
-moz-transform: skewY(-20deg);
-ms-transform: skewY(-20deg);
-o-transform: skewY(-20deg);
transform: skewY(-20deg);
}
ul.piechart li:nth-child(2) {left:180px; top:-120px;
-webkit-transform:rotate(110deg) skewY(-40deg);
-moz-transform:rotate(110deg) skewY(-40deg);
-ms-transform:rotate(110deg) skewY(-40deg);
-o-transform:rotate(110deg) skewY(-40deg);
transform:rotate(110deg) skewY(-40deg);
}
ul.piechart li:nth-child(2) b {background:#c60;
-webkit-transform:skewY(40deg);
-moz-transform:skewY(40deg);
-ms-transform:skewY(40deg);
-o-transform:skewY(40deg);
transform:skewY(40deg);
}
ul.piechart li:nth-child(3) {
-webkit-transform: rotate(160deg) skewY(-50deg); 
-moz-transform: rotate(160deg) skewY(-50deg); 
-ms-transform: rotate(160deg) skewY(-50deg); 
-o-transform: rotate(160deg) skewY(-50deg); 
transform: rotate(160deg) skewY(-50deg);
}
ul.piechart li:nth-child(3) b {background:#cc0;
-webkit-transform:skewY(50deg);
-moz-transform:skewY(50deg);
-ms-transform:skewY(50deg);
-o-transform:skewY(50deg);
transform:skewY(50deg);
}
ul.piechart li:nth-child(4) {
-webkit-transform: rotate(200deg) skewY(-60deg); 
-moz-transform: rotate(200deg) skewY(-60deg); 
-ms-transform: rotate(200deg) skewY(-60deg); 
-o-transform: rotate(200deg) skewY(-60deg); 
transform: rotate(200deg) skewY(-60deg);
}
ul.piechart li:nth-child(4) b {background:#383;
-webkit-transform:skewY(60deg);
-moz-transform:skewY(60deg);
-ms-transform:skewY(60deg);
-o-transform:skewY(60deg);
transform:skewY(60deg);
}
ul.piechart li:nth-child(5) {
-webkit-transform: rotate(230deg) skewY(-70deg); 
-moz-transform: rotate(230deg) skewY(-70deg); 
-ms-transform: rotate(230deg) skewY(-70deg); 
-o-transform: rotate(230deg) skewY(-70deg); 
transform: rotate(230deg) skewY(-70deg);
}
ul.piechart li:nth-child(5) b {background:#069;
-webkit-transform:skewY(70deg);
-moz-transform:skewY(70deg);
-ms-transform:skewY(70deg);
-o-transform:skewY(70deg);
transform:skewY(70deg);
}
ul.piechart li:nth-child(6) {
-webkit-transform: rotate(250deg) skewY(-65deg); 
-moz-transform: rotate(250deg) skewY(-65deg); 
-ms-transform: rotate(250deg) skewY(-65deg); 
-o-transform: rotate(250deg) skewY(-65deg); 
transform: rotate(250deg) skewY(-65deg);
}
ul.piechart li:nth-child(6) b {background:#c0c;
-webkit-transform:skewY(65deg);
-moz-transform:skewY(65deg);
-ms-transform:skewY(65deg);
-o-transform:skewY(65deg);
transform:skewY(65deg);
}
ul.piechart li:nth-child(7) {
-webkit-transform: rotate(275deg) skewY(-75deg); 
-moz-transform: rotate(275deg) skewY(-75deg); 
-ms-transform: rotate(275deg) skewY(-75deg); 
-o-transform: rotate(275deg) skewY(-75deg); 
transform: rotate(275deg) skewY(-75deg);
}
ul.piechart li:nth-child(7) b {background:#609;
-webkit-transform:skewY(75deg);
-moz-transform:skewY(75deg);
-ms-transform:skewY(75deg);
-o-transform:skewY(75deg);
transform:skewY(75deg);
}
ul.piechart li:nth-child(8) {
-webkit-transform: rotate(290deg) skewY(-80deg); 
-moz-transform: rotate(290deg) skewY(-80deg); 
-ms-transform: rotate(290deg) skewY(-80deg); 
-o-transform: rotate(290deg) skewY(-80deg); 
transform: rotate(290deg) skewY(-80deg);
}
ul.piechart li:nth-child(8) b {background:#09c;
-webkit-transform:skewY(80deg);
-moz-transform:skewY(80deg);
-ms-transform:skewY(80deg);
-o-transform:skewY(80deg);
transform:skewY(80deg);
}
ul.piechart li:nth-child(9) {
-webkit-transform: rotate(300deg) skewY(-30deg); 
-moz-transform: rotate(300deg) skewY(-30deg); 
-ms-transform: rotate(300deg) skewY(-30deg); 
-o-transform: rotate(300deg) skewY(-30deg); 
transform: rotate(300deg) skewY(-30deg);
}
ul.piechart li:nth-child(9) b {background:#9ca;
-webkit-transform:skewY(30deg);
-moz-transform:skewY(30deg);
-ms-transform:skewY(30deg);
-o-transform:skewY(30deg);
transform:skewY(30deg);
}
ul.piechart li:nth-child(1) b, 
ul.piechart li:nth-child(2) b, 
ul.piechart li:nth-child(3) b, 
ul.piechart li:nth-child(4) b, 
ul.piechart li:nth-child(5) b, 
ul.piechart li:nth-child(6) b, 
ul.piechart li:nth-child(7) b, 
ul.piechart li:nth-child(8) b,
ul.piechart li:nth-child(9) b
{display:block; width:300px; height:300px; border-radius:300px; position:absolute; left:-151px; top:149px; border:1px solid #fff;
background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,0.6), rgba(255,255,255,0) 100%);
background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,0.6), rgba(255,255,255,0) 100%);
background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,0.6), rgba(255,255,255,0) 100%);
background-image: -o-radial-gradient(circle cover, rgba(255,255,255,0.6), rgba(255,255,255,0) 100%);
background-image: radial-gradient(circle cover, rgba(255,255,255,0.6), rgba(255,255,255,0) 100%);
box-shadow:0px 0px 10px rgba(0,0,0,0.9);
}

dabblet.html

<ul class="piechart">
  <li><b></b></li>
  <li><b></b></li>
  <li><b></b></li>
  <li><b></b></li>
  <li><b></b></li>
  <li><b></b></li>
  <li><b></b></li>
  <li><b></b></li>
  <li><b></b></li>
</ul>​

settings.json

{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}