最近要用到扇形菜单，在 Google 上面找了好久终于找到一个http://www.webdm.cn/webcode/32dc9a08-9e19-4b0f-8864-8e2bba59a824.html，
效果如下图：
可是这个例子只是圆形的一个角，不是一个整圆。由于对 CSS3 不是特别熟悉，弄了半天终于搞定，效果图：
源码：
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>扇形菜单Demo</title> <style type="text/css"> #sectorDiv { position: absolute; left: 600px; top: 230px; z-index: 100; } #sectorDiv ul { padding: 0; margin: 0; list-style: none; position: absolute; /*left: 0; top: 0; width: 0; height: 0;*/ } #oneUl { left: -203px; top: -203px; width: 300px; height: 300px; /*border-color: Red; border-style: solid; border-width: thick;*/ overflow: hidden; z-index: -100; } #twoUl { left: 103px; top: -203px; width: 300px; height: 300px; /* border-color: Red; border-style: solid; border-width: thick;*/ overflow: hidden; z-index: -100; } #threeUl { left: -203px; top: 103px; width: 300px; height: 300px; /* border-color: Red; border-style: solid; border-width: thick;*/ overflow: hidden; z-index: -100; } #fourUl { left: 103px; top: 103px; width: 300px; height: 300px; /*border-color: Red; border-style: solid; border-width: thick;*/ overflow: hidden; z-index: -100; } #sectorDiv ul li a { color: #000; text-decoration: none; font: bold 13px/30px arial, sans-serif; text-align: center; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; line-height:100px; } #oneUl .ulOne { padding: 0; margin: 0; list-style: none; position: absolute; width: 0; height: 0; } #oneUl li.liOne > a { position: absolute; display: block; width: 100px; height: 100px; background: #c8c8c8; border-radius: 0 0 100px 0; left: 300px; top: 300px; -webkit-transform: rotate(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #twoUl li.liOne > a { position: absolute; display: block; width: 100px; height: 100px; background: #c8c8c8; top:300px; border-radius: 0 0 100px 0; -webkit-transform: rotate(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } #threeUl li.liOne > a { position: absolute; display: block; width: 100px; height: 100px; background: #c8c8c8; left:300px; top:0px; border-radius: 0 0 100px 0; -webkit-transform: rotate(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /* #fourUl .ulOne { padding: 0; margin: 0; list-style: none; position: absolute; width: 0; height: 0; }*/ #fourUl li.liOne > a { position: absolute; display: block; width: 100px; height: 100px; background: #c8c8c8; border-radius: 0 0 100px 0; } #sectorDiv ul.ulTwo, #sectorDiv ul.ulThree { z-index: -1; } #fourUl li.liTwo { left: 0; position: absolute; top: 0; } #oneUl li.liTwo > a { position: absolute; display: block; width: 100px; padding-left: 100px; height: 200px; background: #ddd; border-radius: 0 0 200px 0; -webkit-transform: rotate(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #twoUl li.liTwo > a { position: absolute; display: block; width: 100px; padding-left: 100px; height: 200px; background: #ddd; border-radius: 0 0 200px 0; -webkit-transform: rotate(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } #threeUl li.liTwo > a { position: absolute; display: block; width: 100px; padding-left: 100px; height: 200px; background: #ddd; border-radius: 0 0 200px 0; -webkit-transform: rotate(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #fourUl li.liTwo > a { position: absolute; display: block; width: 100px; padding-left: 100px; height: 200px; background: #ddd; border-radius: 0 0 200px 0; } #oneUl ul.ulThree li a { position: absolute; display: block; width: 100px; padding-left: 200px; height: 300px; background: #999; border-radius: 0 0 300px 0; -webkit-transform: rotate(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #twoUl ul.ulThree li a { position: absolute; display: block; width: 100px; padding-left: 200px; height: 300px; background: #999; border-radius: 0 0 300px 0; -webkit-transform: rotate(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } #threeUl ul.ulThree li a { position: absolute; display: block; width: 100px; padding-left: 200px
新闻热点
疑难解答
