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

Question

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

有一张类似于我喜欢的东西的照片：

如果有人能帮助我，我会非常感激。

Answer 1

我所知道的最近的事情是这些：

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

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

这就是你要追求的吗？

Answer 2

这个菜单看起来几乎就像Path的按钮。

您可以找到Path的按钮here的链接。

您只需稍微修改它，以便菜单以完整的方式显示。

Answer 3

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

您可以使用border-radius创建圆形，但实际上并没有制作圆形对象 - 就浏览器而言，它仍然是一个普通的盒子形状，只需将角落四舍五入。这与你在CSS中用圆圈或曲线做其他任何事情的能力完全没有关系。

是的，可能按照你所追求的方式做一些事情，将每个角色放入自己的元素中，并用特定的位置为每个角色设置样式，但这会很痛苦，不灵活，难以使用。如果你真的想这样做，那就是code generator you could try out here，但我会说你正在咆哮错误的树。

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

我建议像Raphael一样调查JS库。有些人尝试过类似的东西已经使用了拉斐尔，这可能会对你有所帮助 - 例如：Radial Pie Menu With Raphael JS

希望有所帮助。