Html 六等分圆形菜单

我正在尝试实现六个分区的循环菜单

（功能（窗口）{
"严格使用",；
//来自bonzo的类帮助器函数https://github.com/ded/bonzo
函数classReg（className）{
返回新的RegExp（“（^ |\\s+”+className+”（\\s+|$）”）；
}
//类列表对类管理的支持
//虽然公平地说，api很糟糕，因为它不会同时接受多个类
变量hasClass、addClass、removeClass；
if（document.documentElement中的“类列表”）{
hasClass=函数（元素，c）{
返回元素classList.contains（c）；
};
addClass=函数（元素，c）{
元素类列表添加（c）；
};
removeClass=函数（elem，c）{
元素类列表。删除（c）；
};
}否则{
hasClass=函数（元素，c）{
返回classReg（c）.test（elem.className）；
};
addClass=函数（元素，c）{
如果（！hasClass（elem，c））{
elem.className=elem.className+''+c；
}
};
removeClass=函数（elem，c）{
elem.className=elem.className.replace（classReg（c），“”）；
};
}
函数切换类（elem，c）{
var fn=hasClass（elem，c）？removeClass:addClass；
fn（elem，c）；
}
风险等级={
//全名
hasClass:hasClass，
addClass:addClass，
removeClass:removeClass，
toggleClass:toggleClass，
//简称
has:hasClass，
add:addClass，
remove:removeClass，
切换：切换类
};
//运输
if（typeof define=='function'&&define.amd）{
//AMD
定义（分类）；
}否则{
//浏览器全局
window.classie=classie；
}
})（窗口）；
//EventListener |@jon| u neal |//github.com/jonathantneal/EventListener
!window.addEventListener&&window.Element&&（function（）{
函数addToPrototype（名称、方法）{
Window.prototype[name]=HTMLDocument.prototype[name]=Element.prototype[name]=method；
}
var注册表=[]；
addToPrototype（“addEventListener”，函数（类型，侦听器）{
var目标=此；
registry.unshift({
__侦听器：函数（事件）{
event.currentTarget=目标；
event.pageX=event.clientX+document.documentElement.scrollLeft；
event.pageY=event.clientY+document.documentElement.scrollTop；
event.preventDefault=函数（）{
event.returnValue=false
};
event.relatedTarget=event.fromElement | | null；
event.stopPropagation=函数（）{
event.cancelBubble=true
};
event.relatedTarget=event.fromElement | | null；
event.target=event.src元素| |目标；
event.timeStamp=+新日期；
调用（目标、事件）；
},
听众：听众，
目标:目标,，
类型：类型
});
this.attachEvent（“on”+类型，注册表[0]。\u侦听器）；
});
addToPrototype（“removeEventListener”，函数（类型，侦听器）{
对于（var index=0，length=registry.length；index
*{
位置：相对位置；
-moz框大小：边框框；
框大小：边框框；
保证金：0；
填充：0；
列表样式：无；
}
html，
身体{
身高：100%；
}
身体{
颜色：#fff；
}
.内容组{
位置：相对位置；
边缘底部：3em；
高度：15公分；
字体系列：“Lato”，Arial，无衬线；
}
.主按钮{
位置：绝对位置；
最高：100%；
左：50%；
z指数：11；
边缘顶部：-2.25em；
左边距：-2.25em；
填充顶部：0；
宽度：4.5em；
高度：4.5em；
边界：无；
边界半径：50%；
背景：无；
背景色：#fff；
颜色：绿色；
文本对齐：居中；
字号：700；
字号：1.5em；
文本转换：大写；
光标：指针；
}
.cstransforms.main_包装{
位置：绝对位置；
最高：100%；
左：50%；
z指数：10；
边缘顶部：-13em；
左边距：-13.5em；
宽度：27em；
高度：27em；
边界半径：50%；
背景：透明；
不透明度：0；
-webkit过渡：全部.3s轻松0.3s；
-moz转换：所有.3s轻松0.3s；
过渡：全部。3秒缓解0.3