how to make an odd shaped html/css menu?

Question

What approach to use to make an odd shaped menu on a website, like attached? Each piece of the circle should be a separate link. Hovering the mouse should be rather precise, especially near the middle. (The absolute 20px middle could be no link at all, if not posible to be 100% precise)

I've seen irregular menus made using overlapping rectangles, like here: http://www.vanityclaire.com/ Shapes are overlapping, but menu is made from rectangles, a little cheating takes place. However, in my case, the amount of overlapping is too much to use any such technique. Is there any chance to do it in browser/device compatible way, other than just use flash?

Answer 1

Actually, you can do it using CSS3 - see my demo: http://dabblet.com/gist/3116939 //

EDIT : version that also works in IE9 http://dabblet.com/gist/3117278

The idea is to have a div .pie with "slices"

<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>

You make the pie to be a disc using border-radius: 50%;

You skew and rotate each slice. You bring back the contents of the slices to a non-skewed rectangular shape (which can also prove useful if you want to have text on the slices) and then you set the background.

Answer 2

SVG can do it. But not available in old browsers.

Answer 3

您可以尝试使用图像映射或SVG（具有后备广告/ polyfill）。