css3实现扇形导航，一个圆形加4个扇形_html/css_WEB-ITnose

效果图：

 

 

主要实现过程:

1)4个Li元素，把他们的定位都设置未absolute.

2)改变li的旋转中心到右下角  transform-origin: 100% 100%; 4个对应旋转的角度为0,90,180,270deg

3)定位第五个li在中心

4)前面的4个li都往其所在角偏移10PX，以显示间隙

5)4个li里面的a标签设置渐变的背景色，让圆心位置的颜色设置为隐藏  background: -webkit-radial-gradient(right bottom, transparent 35%, #eee 35%);

 

 

源码：

<div class="nav">    <ul>        <li><a href=""><span class="icon"></span></a></li>        <li><a href=""><span class="icon"></span></a></li>        <li><a href=""><span class="icon"></span></a></li>        <li><a href=""><span class="icon"></span></a></li>        <li><a href=""></a></li>    </ul></div>

.nav {    width: 300px;    height: 300px;    /*border:1px solid blue;*/    position: fixed;    top: 10%;    left: 30%;    border-radius: 50%;    overflow: hidden;}.nav li {    position: absolute;    width: 150px;    height: 150px;    transform-origin: 100% 100%;}.nav li a:hover {    background: -webkit-radial-gradient(right bottom, transparent 35%, #2e2e2e 35%);}.nav li a {    display: block;    position: absolute;    width: 150px;    height: 150px;    background: -webkit-radial-gradient(right bottom, transparent 35%, #eee 35%);}.nav li:nth-child(1) {    transform: rotate(0deg);    left: -10px;    top: -10px;}.nav li:nth-child(2) {    transform: rotate(90deg);    left: 10px;    top: -10px;}.nav li:nth-child(3) {    transform: rotate(180deg);    top: 10px;    left: 10px;}.nav li:nth-child(4) {    transform: rotate(270deg);    top: 10px;    left: -10px;}.nav li:nth-child(5) {    border-radius: 100%;    transform: scale(0.9);    left: 27.5%;    top: 27.5%;    transform-origin: 0 0;    background: #eee}.nav li:nth-child(5) a {    background: #eee;    border-radius: 100%;}.nav li:nth-child(5) a:hover {    background: #2e2e2e;    border-radius: 100%;}.icon {    opacity: 0.7;    display: inline-block;    width: 80px;    height: 70px;    text-align: center;    font-size: 30px;    background: url(../img/mes.png);    transform: rotate(-50deg) translate(-5%, 83%);}