Notched navigation with images

Bassed on the structure that Harry Roberts suggested, however using images to achieve gradient and shadows. In this state (v1) it works on all good browsers. It also worked in IE8, not at all in IE7 (but can offer alternative) and breaks in IE6, but that should be easily fixed.

HTML

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="current"><a href="#">Porfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

/* Housekeeping */
html,
body{
    margin:0;
    padding:0;
    color:#fff;
    font-family: sans-serif;
}

/* Notch */
.nav{
    overflow:hidden; /* To clear floats */
    background:url('http://dl.dropbox.com/u/813705/Nothced%20Navigation/nav_slice.png') repeat-x;
    margin:0;
    padding:0;
    list-style:none;
}
.nav li{
    float:left;
}
    .nav a {
        display:block;
        padding: 25px;
        height: 25px;
        color:#fff;
        text-decoration:none;
    }
    .nav a:hover{
        text-decoration:none;
    }
        .nav .current a, .nav a:hover {
            position:relative;
        }
        .nav .current a:before,
        .nav .current a:after,
        .nav a:hover:before,
        .nav a:hover:after{
            content:"";
            display:block;
            width:100%; /* Let's call this our magic number... */
            height:25px; /* ...our notch will be half this size. We define it in ems to scale it up with the text size. */
            position:absolute;
            bottom:0;
            left:0;
            cursor: pointer;
        }
        body {
            background:url('http://dl.dropbox.com/u/813705/Nothced%20Navigation/wing.jpg') top left no-repeat; /* Apply to the notch and the relevant container (this case, body). */
        }
        .nav .current a:before, .nav a:hover:before{
            background:url('http://dl.dropbox.com/u/813705/Nothced%20Navigation/wing.jpg') top left no-repeat fixed; /* Apply to the notch and the relevant container (this case, body). */
        }
        .nav .current a:after, .nav a:hover:after {
            background: url('http://dl.dropbox.com/u/813705/Nothced%20Navigation/nav_mask.png') bottom center no-repeat;
        }