What are some reasonable alternatives to an image <area> map?

Is <area> still the best way to handle irregular navigation menus, or is there a better way?

My navigation menu looks like this:

enter image description here

Solution

You can use standard navigation markup:

<div id="nav">
    <ul>
        <li><a class="active" href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

and then do a 2D CSS transform (skew the element around the Y axis):

#nav {
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    -o-transform: skewY(-10deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=1, M12=0,
        M21=-0.174532925, M22=1);
    transform: skewY(-10deg);    
}

enter image description here

See this fiddle for a live example. See this for browser support info.

How to write the IE filter

Convert -10 degrees to radian by typing this in google:

-10 degrees to radian

You will get:

-10 degrees = -0.174532925 radian

Then plug the value in M21.

Why would you use this method

You're concerned about page load time and you don't want another HTTP request for the image.
Standard navigation markup has better semantics especially if you switch to HTML5 and use the nav element which is used by screen readers to figure out where the navigation is.