Javascript 创建包含3个部分的圆圈，并在HTML/css/script中从每个部分执行操作

我对用html设计UI是新手。我有一个要求，根据参考图像设计。我需要相同设计的源代码。请做必要的事

一个圆有三个部分。单击每个零件时将出现一个事件

---

在CSS中创建这样的分段圆是可能的。首先，创建边界半径为50%的圆。然后使用

变换创建片段

：

transform: rotate(-60deg) skewY(30deg) scale(1.2);

说明：使用

rotate

可以将每个线段放置在适当的位置，使用

skew

可以为圆心创建所需的角度，使用

scale

可以确保线段填充到圆的边界。最后，您只需为内圈创建一个元素，就完成了

要使片段可单击，可以使用

onclick

事件处理程序或jQuerys

click（）

函数

另见

.pie{
位置：相对位置；
保证金：1em自动；
边框：4倍纯黑；
填充：0；
宽度：15em；
高度：15公分；
边界半径：50%；
列表样式：无；
溢出：隐藏；
}
.切片{
溢出：隐藏；
位置：绝对位置；
排名：0；
右：0；
宽度：50%；
身高：50%；
变换原点：0%100%；
边框：2件纯黑；
框大小：边框框；
}
.切片内容{
位置：绝对位置；
左-100%；
宽度：200%；
身高：200%；
边界半径：50%；
}
.slice：第n个子项（1）{
变换：旋转（-60度）倾斜（30度）比例（1.2）；
}
.slice:n个子项（1）.切片内容{
变换：倾斜（-30度）；/*不倾斜的切片内容*/
背景：浅蓝色；
}
.slice：第n个子对象（2）{
变换：旋转（60度）倾斜（30度）比例（1.2）；
}
.slice:第n个子项（2）.切片内容{
变换：倾斜（-30度）；/*不倾斜的切片内容*/
背景：浅绿色；
}
.slice:第n个子对象（3）{
变换：旋转（180度）倾斜（30度）比例（1.2）；
}
.slice:第n个子项（3）.切片内容{
变换：倾斜（-30度）；/*不倾斜的切片内容*/
背景：橙色；
}
.内馅饼{
位置：绝对位置；
宽度：3em；
高度：3em；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
边界半径：50%；
边框：4倍纯黑；
背景：白色；
}

单击1


点击2


点击3

希望这会对您有所帮助欢迎来到Stackoverflow Sahana。要获得尽可能好的帮助，请转到页面，在那里您可以看到如何提出社区接受的问题。谢谢sasi！。如果我得到闭包设计，这将非常有帮助。+我试图水平显示文本。但它并没有正确地出现。你能帮忙吗。切片内容应在第一个切片上显示为顶部，在第二和第三个切片上显示为左侧和右侧。还希望引发一个单击事件，该事件应在饼图圆圈内单击，但没有超出边界的操作。@Sahana很高兴我能提供帮助。对于你在上面评论中提到的问题，我想请你投赞成票/接受：）请你再问一个问题。