<style type="text/css">
ul.flower {padding:0; margin:50px auto; list-style:none; position:relative; height:300px; width:300px;}
ul.flower li a {display:block; width:100px; position:absolute; left:0; top:0; background:#888; line-height:100px;
font:bold 13px/100px arial, sans-serif; color:#fff; text-align:center; text-decoration:none;
border-radius:100px 100px 0 100px;
-moz-border-radius:100px 100px 0 100px;
transform-origin: 101px 101px;
-ms-transform-origin: 101px 101px;
-o-transform-origin: 101px 101px;
-moz-transform-origin: 101px 101px;
-webkit-transform-origin: 101px 101px;
}
ul.flower li a b {display:block;
transform:rotate(-40deg);
-ms-transform:rotate(-40deg);
-o-transform:rotate(-40deg);
-moz-transform:rotate(-40deg);
-webkit-transform:rotate(-40deg);
}
ul.flower li a:hover {color:#000; background:#c00;
background-image: -webkit-gradient(linear, 0% 0%, 45% 45%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-60deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-60deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(-60deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4); 
-webkit-box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
}
ul.flower li.p1 a {
transform:rotate(60deg)skew(30deg);
-ms-transform:rotate(60deg)skew(30deg);
-o-transform:rotate(60deg)skew(30deg);
-moz-transform:rotate(60deg)skew(30deg);
-webkit-transform:rotate(60deg)skew(30deg);
}
ul.flower li.p2 a {
transform:rotate(120deg)skew(30deg);
-ms-transform:rotate(120deg)skew(30deg);
-o-transform:rotate(120deg)skew(30deg);
-moz-transform:rotate(120deg)skew(30deg);
-webkit-transform:rotate(120deg)skew(30deg);
}
ul.flower li.p3 a {
transform:rotate(180deg)skew(30deg);
-ms-transform:rotate(180deg)skew(30deg);
-o-transform:rotate(180deg)skew(30deg);
-moz-transform:rotate(180deg)skew(30deg);
-webkit-transform:rotate(180deg)skew(30deg);
}
ul.flower li.p4 a {
transform:rotate(240deg)skew(30deg);
-ms-transform:rotate(240deg)skew(30deg);
-o-transform:rotate(240deg)skew(30deg);
-moz-transform:rotate(240deg)skew(30deg);
-webkit-transform:rotate(240deg)skew(30deg);
}
ul.flower li.p5 a {
transform:rotate(300deg)skew(30deg);
-ms-transform:rotate(300deg)skew(30deg);
-o-transform:rotate(300deg)skew(30deg);
-moz-transform:rotate(300deg)skew(30deg);
-webkit-transform:rotate(300deg)skew(30deg);
}
ul.flower li.p6 a {
transform:rotate(360deg)skew(30deg);
-ms-transform:rotate(360deg)skew(30deg);
-o-transform:rotate(360deg)skew(30deg);
-moz-transform:rotate(360deg)skew(30deg);
-webkit-transform:rotate(360deg)skew(30deg);
}
ul.flower li.center {width:54px; height:54px;position:absolute; left:72px; top:72px; z-index:100; background:#ff0;
border-radius:50px;
-moz-border-radius:50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.6); 
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.6);
}
</style>
<br><br>
<ul class ="flower">
<li class ="p1"><a href="#url"><b>HOME</b></a></li>
<li class ="p2"><a href="#url"><b>PRODUCTS</b></a></li>
<li class ="p3"><a href="#url"><b>SERVICES</b></a></li>
<li class ="p4"><a href="#url"><b>SALES</b></a></li>
<li class ="p5"><a href="#url"><b>CONTACT</b></a></li>
<li class ="p6"><a href="#url"><b>FAQS</b></a></li>
<li class ="center"></li>
</ul>