css - 在 CSS 中创建一个圆形列表（用于圆形菜单栏）

Question

我真的希望有人能帮助我。我正在尝试在 CSS 中创建一个圆形菜单栏，我搜索并搜索了解决方案，但一无所获。<ul>我知道如何创建圆形区域（通过设置半径），并且我知道如何使用&创建一个简单的直线菜单，<li>但如前所述，我想创建一个圆形区域。

有一张类似的照片，我很想开始工作：

如果有人能在这方面帮助我，我将非常感激。

Answer 1

我所知道的最接近的事情是：

http://www.cssplay.co.uk/menus/cssplay-round-and-round.html

http://codepen.io/tgrant54/pen/lBHwK

这就是你所追求的吗？

Answer 2

这个菜单看起来很像 Path 的按钮。

您可以在此处找到 Path 按钮的链接。

您只需对其进行一些修改，以便菜单显示为完整的球体。

Answer 3

这不是你真正想要在纯 CSS 中做的事情。

您可以使用 制作圆形border-radius，但实际上并没有制作圆形对象——就浏览器而言，它仍然是一个常规的盒子形状，只是边角被修圆了。这与你在 CSS 中对圆或曲线做任何其他事情的能力完全没有关系。

是的，可以按照您的要求做一些事情，将每个角色放入自己的元素中，并为每个角色设置特定位置的样式，但这将是痛苦、不灵活且难以使用的。如果你真的想这样做，你可以在这里试用一个代码生成器，但我会说你找错了树。

如果你想正确地做这种事情，你真正需要考虑的是以图形格式，使用 Canvas 或 SVG，加上大量的 javascript 代码。

我建议为此研究像 Raphael 这样的 JS 库；有些人已经在使用 Raphael 尝试过类似的事情，这可能会对您有所帮助——请参见此处，例如：Radial Pie Menu With Raphael JS

希望有帮助。