使用css实现扇形菜单

#sector {

position: relative;

overflow: hidden;

width: 200px;

height: 100px;

margin: 150px auto;

background-color: #ddd;

border-top-left-radius: 100px;

border-top-right-radius: 100px;

}

#sector ul li {

list-style: none;

position: absolute;

width: 200px;

height: 100px;

right: 50%;

top: 0;

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

transform-origin: 100% 100%;

}

#sector .sector1 {

background-color: #fef4ac;

-webkit-transform: skew(54deg);

-moz-transform: skew(54deg);

-ms-transform: skew(54deg);

transform: skew(54deg);

}

#sector .sector2 {

background-color: #FCF6E6;

-webkit-transform: rotate(36deg) skew(54deg);

-moz-transform: rotate(36deg) skew(54deg);

-ms-transform: rotate(36deg) skew(54deg);

transform: rotate(36deg) skew(54deg);

}

#sector .sector3 {

background-color: #faf2cc;

-webkit-transform: rotate(72deg) skew(54deg);

-moz-transform: rotate(72deg) skew(54deg);

-ms-transform: rotate(72deg) skew(54deg);

transform: rotate(72deg) skew(54deg);

}

#sector .sector4 {

background-color: #f9f1e9;

-webkit-transform: rotate(108deg) skew(54deg);

-moz-transform: rotate(108deg) skew(54deg);

-ms-transform: rotate(108deg) skew(54deg);

transform: rotate(108deg) skew(54deg);

}

#sector .sector5 {

background-color: #f5e79e;

-webkit-transform: rotate(144deg) skew(54deg);

-moz-transform: rotate(144deg) skew(54deg);

-ms-transform: rotate(144deg) skew(54deg);

transform: rotate(144deg) skew(54deg);

}

#sector ul li p {

position: absolute;

top: 50px;

left: 150px;

-webkit-transform: skew(-54deg) rotate(-70deg);

-moz-transform: skew(-54deg) rotate(-70deg);

-ms-transform: skew(-54deg) rotate(-70deg);

transform: skew(-54deg) rotate(-70deg);

}

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！