[css3] Gradient

http://www.colorzilla.com/gradient-editor/

http://gradients.glrzad.com/

http://www.cssmatic.com/gradient-generator

graph

.graph {width:300px; height:300px; position:relative;}

.graph li {position:absolute; top:0; width: 300px; height: 300px;}

.graph li p {width: 300px; height: 300px;}

.graph li span {display:block; width:150px; height: 300px;}

.graph :nth-child(odd) { clip: rect(0px, 300px, 300px, 150px);}

.graph :nth-child(even) { clip: rect(0px, 150px, 300px, 0px);}

.pie_left{border-radius:150px 0 0 150px;}

.pie_right{border-radius:0 150px 150px 0; margin-left:150px;}

.c1_l span {background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#de3d00), to(#BC3603));}

.c1_r span {background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#de3d00), to(#BC3603));}

.c2_l span {background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#fb8a00), to(#D97904));}

.c2_r span {background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#fb8a00), to(#D97904));}

.c3_l span {background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#ffc517), to(#F2B705));}

.c3_r span {background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#ffc517), to(#F2B705));}

.c4_l span {background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#9bc800), to(#86AD00));}

.c4_r span {background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#9bc800), to(#86AD00));}

.c5_l span{background-image: -webkit-gradient(radial, left center, 10, left center, 150, from(#00addb), to(#0092B9));}

.c5_r span{background-image: -webkit-gradient(radial, right center, 10, right center, 150, from(#00addb), to(#0092B9));}

.graph :nth-child(1) p {-webkit-transform: rotate(180deg);}

.graph :nth-child(2) p {-webkit-transform: rotate(180deg);}

.graph :nth-child(3) p {-webkit-transform: rotate(180deg);}

.graph :nth-child(4) p {-webkit-transform: rotate(170deg);}

.graph :nth-child(5) p {-webkit-transform: rotate(180deg);}

.graph :nth-child(6) p {-webkit-transform: rotate(152deg);}

.graph :nth-child(7) p {-webkit-transform: rotate(180deg);}

.graph :nth-child(8) p {-webkit-transform: rotate(126deg);}

.graph :nth-child(9) p {-webkit-transform: rotate(180deg);}

.graph :nth-child(10) p{-webkit-transform: rotate(36deg);}

<ul class="graph">

<li class="c1_r"><p><span class="pie_left"></span></p></li>

<li class="c1_l"><p><span class="pie_right"></span></p></li>

<li class="c2_r"><p><span class="pie_left"></span></p></li>

<li class="c2_l"><p><span class="pie_right"></span></p></li>

<li class="c3_r"><p><span class="pie_left"></span></p></li>

<li class="c3_l"><p><span class="pie_right"></span></p></li>

<li class="c4_r"><p><span class="pie_left"></span></p></li>

<li class="c4_l"><p><span class="pie_right"></span></p></li>

<li class="c5_r"><p><span class="pie_left"></span></p></li>

<li class="c5_l"><p><span class="pie_right"></span></p></li>

</ul>