<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://delaisait.ucoz.ru/script/menu/img/6/icon1.png" alt="" /></b></a></li>
  <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon2.png" alt="" /></b></a></li>
  <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon3.png" alt="" /></b></a></li>
  <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon4.png" alt="" /></b></a></li>
  <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon5.png" alt="" /></b></a></li>
  <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon6.png" alt="" /></b></a></li>
  <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon7.png" alt="" /></b></a></li>
  <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon8.png" alt="" /></b></a></li>
  <li><a href="#"><b><img src="http://delaisait.ucoz.ru/script/menu/img/6/icon9.png" alt="" /></b></a></li>
  <li></li>
  </ul>