请帮助我创建一个切片圆圈，我可以在其中单击每个切片以给出不同的命令，就像我们在按钮中所做的那样。切片必须如下所示：
2个圈，主要外圈，内圈（外圈大小的一半），
主圆上的 3 条线将 2 个圆分成 12 个切片。这 3 条线的直线应该是垂直线。
参考图片：
.maincircle {
height: 404px;
width: 404px;
}
.slice1 {
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
background-color: #093;
cursor: pointer;
border-radius: 190px 0 0 0;
-moz-border-radius: 190px 0 0 0;
-webkit-border-radius: 190px 0 0 0;
}
.slice1:hover {
background-color: #6C6;
}
.slice2 {
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
background-color: #093;
cursor: pointer;
-moz-border-radius: 0 190px 0 0;
-webkit-border-radius: 0 190px 0 0;
}
.slice2:hover {
background-color: #6C6;
}
.slice3 {
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
background-color: #093;
cursor: pointer;
-moz-border-radius: 0 0 0 190px;
-webkit-border-radius: 0 0 0 190px;
}
.slice3:hover {
background-color: #6C6;
}
.slice4 {
float: left;
height: 200px;
width: 200px;
border: 1px solid #000;
background-color: #093;
cursor: pointer;
-moz-border-radius: 0 0 190px 0;
-webkit-border-radius: 0 0 190px 0;
}
.slice4:hover {
background-color: #6C6;
}<div class="maincircle">
<div class="slice1"></div>
<div class="slice2"></div>
<div class="slice3"></div>
<div class="slice4"></div>
</div>