基础实现(去搜下 扇形菜单),剩下就是调整参数和细节处理,我就不弄了
Light.frame {position:relative;margin:200px;width:200px;height:400px;box-shadow:0 0 0 1px #F00 inset;overflow:hidden;}
.frame .p {position:absolute;display:none;width:200px;height:200px;top:200px;left:100px;background-color:rgba(255,196,196,0.5);transform-origin:left top}
.frame .p:nth-child(2n+1) {background-color:rgba(196,196,255,0.5);}
.frame .p00 {display:block;transform:rotate(0deg) skew(60deg);}
.frame .p01 {display:block;transform:rotate(30deg) skew(60deg);}
.frame .p02 {display:block;transform:rotate(60deg) skew(60deg);}
.frame .p03 {display:block;transform:rotate(90deg) skew(60deg);}
.frame .p04 {display:block;transform:rotate(120deg) skew(60deg);}
.frame .p05 {display:block;transform:rotate(150deg) skew(60deg);}
.frame .p06 {display:block;transform:rotate(180deg) skew(60deg);}
.frame .p07 {display:block;transform:rotate(210deg) skew(60deg);}
.frame .p08 {display:block;transform:rotate(240deg) skew(60deg);}
.frame .p09 {display:block;transform:rotate(270deg) skew(60deg);}
.frame .p10 {display:block;transform:rotate(300deg) skew(60deg);}
.frame .p11 {display:block;transform:rotate(330deg) skew(60deg);}