how to make an odd shaped html/css menu?
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?
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
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.