<style>ul.piechart {padding:0; margin:0 auto; list-style:none; width:340px; height:340px; overflow:hidden; border-radius:320px; position:relative;-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-ms-transform:rotate(-20deg);-o-transform:rotate(-20deg);transform:rotate(-20deg);}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 b {-webkit-transform: skewY(50deg);-moz-transform: skewY(50deg);-ms-transform: skewY(50deg);-o-transform: skewY(50deg);transform: skewY(50deg);}ul.piechart li:nth-child(1) {-webkit-transform: skewY(-50deg);-moz-transform: skewY(-50deg);-ms-transform: skewY(-50deg);-o-transform: skewY(-50deg);transform: skewY(-50deg);}ul.piechart li:nth-child(1) b {background:#c88;}ul.piechart li:nth-child(2) {-webkit-transform:rotate(40deg) skewY(-50deg);-moz-transform:rotate(40deg) skewY(-50deg);-ms-transform:rotate(40deg) skewY(-50deg);-o-transform:rotate(40deg) skewY(-50deg);transform:rotate(40deg) skewY(-50deg);}ul.piechart li:nth-child(2) b {background:#c68;}ul.piechart li:nth-child(3) {-webkit-transform:rotate(80deg) skewY(-50deg);-moz-transform:rotate(80deg) skewY(-50deg);-ms-transform:rotate(80deg) skewY(-50deg);-o-transform:rotate(80deg) skewY(-50deg);transform:rotate(80deg) skewY(-50deg);}ul.piechart li:nth-child(3) b {background:#cc8;}ul.piechart li:nth-child(4) {-webkit-transform:rotate(120deg) skewY(-50deg);-moz-transform:rotate(120deg) skewY(-50deg);-ms-transform:rotate(120deg) skewY(-50deg);-o-transform:rotate(120deg) skewY(-50deg);transform:rotate(120deg) skewY(-50deg);}ul.piechart li:nth-child(4) b {background:#696;}ul.piechart li:nth-child(5) {-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(5) b {background:#869;}ul.piechart li:nth-child(6) {-webkit-transform:rotate(200deg) skewY(-50deg);-moz-transform:rotate(200deg) skewY(-50deg);-ms-transform:rotate(200deg) skewY(-50deg);-o-transform:rotate(200deg) skewY(-50deg);transform:rotate(200deg) skewY(-50deg);}ul.piechart li:nth-child(6) b {background:#c8c;}ul.piechart li:nth-child(7) {-webkit-transform:rotate(240deg) skewY(-50deg);-moz-transform:rotate(240deg) skewY(-50deg);-ms-transform:rotate(240deg) skewY(-50deg);-o-transform:rotate(240deg) skewY(-50deg);transform:rotate(240deg) skewY(-50deg);}ul.piechart li:nth-child(7) b {background:#689;}ul.piechart li:nth-child(8) {-webkit-transform:rotate(280deg) skewY(-50deg);-moz-transform:rotate(280deg) skewY(-50deg);-ms-transform:rotate(280deg) skewY(-50deg);-o-transform:rotate(280deg) skewY(-50deg);transform:rotate(280deg) skewY(-50deg);}ul.piechart li:nth-child(8) b {background:#89c;}ul.piechart li:nth-child(9) {-webkit-transform:rotate(320deg) skewY(-50deg);-moz-transform:rotate(320deg) skewY(-50deg);-ms-transform:rotate(320deg) skewY(-50deg);-o-transform:rotate(320deg) skewY(-50deg);transform:rotate(320deg) skewY(-50deg);}ul.piechart li:nth-child(9) b {background:#9ca;}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:-150px; top:150px;box-shadow:0px 0px 10px rgba(0,0,0,0.9);}ul.piechart li:nth-child(10) {width:200px; height:200px; box-shadow:inset 0px 0px 10px rgba(0,0,0,0.9); border-radius:200px; background:#fff; position:absolute; left:70px; top:70px;}ul.piechart li a b img {position:absolute; left:180px; top:20px; border:0;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20deg);transform:rotate(20deg);}ul.piechart li a:hover b {background:#eee;}</style><ul class="piechart"><li><a href="#"><b><img src="http://bns-od.com/uploads/posts/2013-04/1364854779_icon1.png" alt="" /></b></a></li><li><a href="#"><b><img src="http://bns-od.com/uploads/posts/2013-04/1364854714_icon2.png" alt="" /></b></a></li><li><a href="#"><b><img src="http://bns-od.com/uploads/posts/2013-04/1364854765_icon3.png" alt="" /></b></a></li><li><a href="#"><b><img src="http://bns-od.com/uploads/posts/2013-04/1364854791_icon4.png" alt="" /></b></a></li><li><a href="#"><b><img src="http://bns-od.com/uploads/posts/2013-04/1364854764_icon5.png" alt="" /></b></a></li><li><a href="#"><b><img src="http://bns-od.com/uploads/posts/2013-04/1364854794_icon6.png" alt="" /></b></a></li><li><a href="#"><b><img src="http://bns-od.com/uploads/posts/2013-04/1364854751_icon7.png" alt="" /></b></a></li><li><a href="#"><b><img src="http://bns-od.com/uploads/posts/2013-04/1364854750_icon8.png" alt="" /></b></a></li><li><a href="#"><b><img src="http://bns-od.com/uploads/posts/2013-04/1364854783_icon9.png" alt="" /></b></a></li><li></li></ul>
