JSFiddle - React, Tailwind, and code Playground

by achudars

HTML

<body>
<div id="wrapper">
    <div class="center">
        <ul class="piechart">
<li><a href="index.html"><b><img src="piemenu/icon1.png" alt="" /></b></a></li>
<li><a href="../menus/index.html"><b><img src="piemenu/icon2.png" alt="" /></b></a></li>
<li><a href="../boxes/index.html"><b><img src="piemenu/icon3.png" alt="" /></b></a></li>
<li><a href="../ie/index.html"><b><img src="piemenu/icon4.png" alt="" /></b></a></li>
<li><a href="../layouts/index.html"><b><img src="piemenu/icon5.png" alt="" /></b></a></li>
<li><a href="../mozilla/index.html"><b><img src="piemenu/icon6.png" alt="" /></b></a></li>
<li><a href="../opacity/index.html"><b><img src="piemenu/icon7.png" alt="" /></b></a></li>
<li><a href="index.html"><b><img src="piemenu/icon8.png" alt="" /></b></a></li>
<li><a href="../menus/index.html"><b><img src="piemenu/icon9.png" alt="" /></b></a></li>
<li></li>
</ul>
        
    </div>
</div>
    <div id="imageholder"><img src="/images/skull.png"></div>
</body>

CSS

ul.piechart {
    padding:0;
    margin:0 auto;
    list-style:none;
    width:1020px;
    height:1020px;
    background-color: black;
    overflow:hidden;
    border-radius:50%;
    position:relative;
-webkit-transform:rotate(-120deg);
-moz-transform:rotate(-120deg);
-ms-transform:rotate(-120deg);
-o-transform:rotate(-120deg);
transform:rotate(-120deg);
}

ul.piechart li {
    width:900px;
    height:900px;
    background:transparent;
    position:absolute;
    left:510px;
    top:-390px;
    overflow:hidden;
-webkit-transform-origin:0 900px;
-moz-transform-origin:0 900px;
-ms-transform-origin:0 900px;
-o-transform-origin:0 900px;
transform-origin:0 900px;
}
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:red;}

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:grey;}
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:#000;}
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:#000;}
ul.piechart li:nth-child(5)...