如何制作奇怪的html / css菜单？

Question

使用什么方法在网站上制作奇怪的菜单，如附件？圆圈的每个部分都应该是一个单独的链接。悬停鼠标应该相当精确，特别是在中间附近。 （绝对20px中间可能根本没有链接，如果不能100％准确）

我见过使用重叠矩形制作的不规则菜单，例如：http://www.vanityclaire.com/ 形状是重叠的，但菜单是由矩形制成的，会发生一些作弊行为。但是，在我的情况下，重叠量太多而无法使用任何此类技术。有没有机会以浏览器/设备兼容的方式进行，除了使用闪存？

Answer 1

实际上，您可以使用CSS3进行操作 - 请参阅我的演示：http://dabblet.com/gist/3116939 //

编辑：版本也适用于IE9 http://dabblet.com/gist/3117278

我们的想法是让div .pie加上“切片”

<ul class="pie">
    <li class="slice" id="s1">
        <a class="slice-contents" href="#slice1"></a>
    </li>
    <li class="slice" id="s2">
        <a class="slice-contents" href="#slice2"></a>
    </li>
<!-- and so on -->
</div>

使用border-radius: 50%;

将饼形成光盘

您倾斜并旋转每个切片。您将切片的内容恢复为非倾斜的矩形形状（如果您希望切片上有文本，这也可以证明是有用的），然后设置背景。

Answer 2

SVG可以做到。但在旧浏览器中不可用。

Answer 3

您可以尝试使用image maps或SVG（使用后备/填充）。