使用HTML和Css创建交互式半圆导航

我想创建一个带有html和css的交互式wiki，方法是使用一个半圆，并将该圆划分为每个主题的不同部分。我想到了以下草案：

我还没有在使用动画创建自己的SVG的上下文中完成html和css。 目前，我使用以下作为起点：

$base:#A5E2F3；
.菜单{
填充：0；
列表样式：无；
位置：相对位置；
保证金：30像素自动；
宽度：70%；
身高：0；
垫面：70%；
}
@介质和全部（最大宽度：320px）{
.菜单{
宽度：230px；
高度：230像素；
填充：0；
}
}
@介质和全部（最小宽度：700px）{
.菜单{
宽度：500px；
高度：500px；
填充：0；
}
}
.menu li{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
剪辑路径：url（#扇区）；
/*在Chrome/Opera/Safari中试试这一款*/
/*剪辑路径：多边形（50%50%，100%50%，75%6.6%）*/
a{
显示：块；
宽度：100%；
身高：100%；
}
&：悬停{
背景颜色：金色；
}
}
.一{
背景色：$base；
变换：旋转（0度）；
}
.二{
背景色：深色（底色，7%）；
变换：旋转（-60度）；
}
.三{
背景色：深色（底色，14%）；
变换：旋转（-120度）；
}
.图标{
位置：绝对位置；
/*此处的精确值取决于您在项目中放置的内容（图标、图像、文本等）*/
右：15%；
最高：30%；
/*确保其旋转足够；旋转角度=扇区本身的角度*/
变换：旋转（60度）；
/*根据需要进一步设计样式*/
颜色：深色（$base，60%）；
字体系列：独立花；
字体大小：25px；
}
p{
文本对齐：居中；
宽度：80%；
保证金：0自动；
}

以下是我关于此任务的问题：
1） 如何创建交互式按钮
-单击按钮将使其余按钮消失
-1/3半圆将扩展为1/4半圆
2） 如何通过动画改善点击
-按钮从1/3变为1/4半圆

---

提前谢谢你

要回答您的问题：

1） 。交互式按钮可以通过多种方式创建，我个人会在HTML中执行以下操作：

<button type="button" data-toggle="menuItem">Toggle</button>

2） 。这实际上取决于您如何创建半圆，但我想说，您最好的跨浏览器解决方案是进一步研究CSS“transition”属性：

---

我希望这有帮助，如果你不明白我说的话，请告诉我。

这可能会帮助你，因为你的HTML是无效的。只有

可以是

的子级。

$("button[data-toggle='menuItem']").on("click", function () {
    // - Do your toggle logic in here
    // - Do '.hide()' on all buttons that aren't '$(this)'.
    // - Add class to '$(this)' to make it expand.
});