css3制作八棱锥_css3制作扇形菜单

纯CSS扇形菜单

/*导航外层div设为圆形*/.css-transforms .menu-wrapper{overflow:hidden;zoom:1;position:relative;width:460px;height:460px;margin:40px auto 0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:transparent;pointer-events:auto;border:1px solid #000;

}

/*覆盖a标签的内侧靠近圆心的部分, 避免鼠标点击事件*/.css-transforms .menu-wrapper:after{color:transparent;content:".";display:block;position:absolute;z-index:10;left:50%;top:50%;margin-left:-150px;margin-top:-150px;width:300px;height:300px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:1px solid blue;

}.css-transforms .menu-wrapper li{position:absolute;top:-70px;left:-70px;overflow:hidden;width:300px;height:300px;transform-origin:100% 100%;pointer-events:none;border:1px solid green;

}

/*a标签反倾斜角度为-(90-x),旋转角度为-x,x为我们想要的圆心角,在这个demo里,有3个列表项,半圆,得出圆心角为60*/.css-transforms .menu-wrapper li a{position:absolute;right:-200px;bottom:-2