how to make an odd shaped html/css menu?

Tags: html,css,css-shapes

Problem :

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)

enter image description here

I've seen irregular menus made using overlapping rectangles, like here: 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?

Solution :

Actually, you can do it using CSS3 - see my demo: //

EDIT: version that also works in IE9

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 class="slice" id="s2">
        <a class="slice-contents" href="#slice2"></a>
<!-- and so on -->

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.

    CSS Howto..

    CSS: how to add a style to everything, unless it is defined

    How can I transition height: 0; to height: auto; using CSS?

    How to fix image to bottom right in gallery

    How should it work if I want a page to have a theme-roller (more or less like the jQuery themeroller)

    How do I divide all margins but last to even out space?

    How to prevent one table from obeying CSS rule

    Foundation 6: How to set .is-open-right translateX value with JavaScript

    How do I absolutely position a relatively positioned element?

    How can I apply a css rule to all descendants of an elements

    How to scale background image proportionally which is in css background of a div?

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    Percentages in CSS: How are they calculated internally?

    In CSS, how to hover a background over an image

    How to remove margin on horizontal list line break?

    How can I disable the “Up” arrow via CSS

    How to center text inside div in this specific situation? [duplicate]

    How to align
  • to the top when higher items are hidden via CSS
  • How to target CSS link with JavaScript

    How to get Google menu buttons like styling using CSS

    How to customize the look and feel of rich faces tab panel

    How to markup an obscure data table layout for screen readers?

    How would I create global scripts within HTML Pages so I don't need to constantly change the location?

    How to get a tight div when heights differ? [duplicate]

    How to hide text without ID?

    How to get button groups that span the full width of a parent in Bootstrap?

    How to set minimum height for a div?

    How to achieve a left and right background split leaving middle div visible?

    How to make sure that different severity Toasters are shown differently?

    Twitter boostrap and css: How to remove the modal overlay and refocus on the input box, so the users can type with the modal open

    How to select 3rd 'a' tag in a list for RSpec test?