Javascript 如何使用CSS3/HTML5创建切片圆？

请帮助我创建一个切片圆，在这里我可以单击每个切片以发出不同的命令，就像我们在按钮中所做的那样。切片必须如下所示：

• 2个圆，主外圆，内圆（大小为外圆的一半）

• 在主圆上画3条线，将2个圆分成12片。 这三条直线的直线应为垂直线

参考图像：

.maincycle{
高度：404px；
宽度：404px；
}
.1{
浮动：左；
高度：200px；
宽度：200px；
边框：1px实心#000；
背景色：#093；
光标：指针；
边界半径：190px 0；
-moz边界半径：190px 0；
-webkit边界半径：190px 0；
}
.1:悬停{
背景色：#6C6；
}
.2{
浮动：左；
高度：200px；
宽度：200px；
边框：1px实心#000；
背景色：#093；
光标：指针；
-moz边界半径：0 190px 0；
-webkit边界半径：0 190px 0 0；
}
.2:悬停{
背景色：#6C6；
}
.3{
浮动：左；
高度：200px；
宽度：200px；
边框：1px实心#000；
背景色：#093；
光标：指针；
-moz边界半径：0 190px；
-webkit边界半径：0 190px；
}
.3:悬停{
背景色：#6C6；
}
.4{
浮动：左；
高度：200px；
宽度：200px；
边框：1px实心#000；
背景色：#093；
光标：指针；
-moz边界半径：0 190px 0；
-webkit边界半径：0 190px 0；
}
.4:悬停{
背景色：#6C6；
}

---

下面是我将采用的方法的一个快速示例

演示

我使用

http://code.highcharts.com/highcharts.js

适用于此类情况。这意味着使用饼图，你可以根据你的需要设计它们的样式，让它们按照你喜欢的方式表现。它非常快速和简单

编辑

更新到多层

$（文档）.ready（函数（）{
Highcharts.setOptions({
颜色：['#2a6705']
});
RenderPieChart（'容器'[
[‘一件’，15.6]，
[‘一件’，15.6]，
[‘一件’，15.6]，
[‘一件’，15.6]，
[‘一件’，15.6]，
[‘一件’，15.6]，
]);
函数RenderPieChart（elementId，dataList）{
新海图，海图({
图表：{
renderTo:elementId，
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文字：“使用饼图不仅仅是数据”
},
工具提示：{
格式化程序：函数（）{
返回“在此处添加事件”；
}
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式化程序：函数（）{
返回“使这些可点击”；
}
}
}
},
系列：[{
键入“pie”，
名称：“浏览器共享”，
数据：数据列表
}, {
键入“pie”，
名称：“浏览器共享”，
数据：数据列表，
内部尺寸：“70%”
}]
});
};
});
下面是我将采用的方法的一个快速示例

演示

我使用
http://code.highcharts.com/highcharts.js
适用于此类情况。这意味着使用饼图，你可以根据你的需要设计它们的样式，让它们按照你喜欢的方式表现。它非常快速和简单

编辑

更新到多层


$（文档）.ready（函数（）{
Highcharts.setOptions({
颜色：['#2a6705']
});
RenderPieChart（'容器'[
[‘一件’，15.6]，
[‘一件’，15.6]，
[‘一件’，15.6]，
[‘一件’，15.6]，
[‘一件’，15.6]，
[‘一件’，15.6]，
]);
函数RenderPieChart（elementId，dataList）{
新海图，海图({
图表：{
renderTo:elementId，
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文字：“使用饼图不仅仅是数据”
},
工具提示：{
格式化程序：函数（）{
返回“在此处添加事件”；
}
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式化程序：函数（）{
返回“使这些可点击”；
}
}
}
},
系列：[{
键入“pie”，
名称：“浏览器共享”，
数据：数据列表
}, {
键入“pie”，
名称：“浏览器共享”，
数据：数据列表，
内部尺寸：“70%”
}]
});
};
});
我发现这很有趣，所以我继续在SVG中创建它：


路径：悬停{
填充：蓝色；
}
我发现这很有趣，所以我继续在SVG中创建它：


路径：悬停{
填充：蓝色；
}

查看

或

元素。如果您不需要添加任何精心制作的动画，

将是最适合您的。我的可能副本只能达到我使用4个div的级别，其中只有4个片段，请查看

或

元素。如果您不需要添加任何精心制作的动画，

将是最适合您的。我可能的复制只能达到我使用4个div的级别，其中它只有4个片段，如果您不需要它的交互式，只能单击，我只建议使用

html

image mapWow！非常感谢你的帮助！不客气。如果我的回答有帮助的话，请你把它标记为正确。谢谢：）如果你不需要它的互动，只有点击，我会简单