Q:

Creating a strange shape in CSS

I'm trying to create this shape in css.

I have gone as far as I can and I can't create the spike on the right hand side
Here is my CSS
nav li a {
    float: left;
    height: 23px;
    line-height: 24px;
    position: relative;
    padding: 1px 10px 0 24px;
    color: #fff;
    background-color: #393233;
    text-align: center;
    width:75%;
}
nav li a:before {
    content: "";
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-color: white #393233 white white;
    border-style: solid;
    border-width: 12px 12px 12px 12px;
  }
nav li a:after {
    content: "";
    float: left;
    position: absolute;
    top: 0;
    right: -12px;
    width: 0;
    height: 0;
    border-color: #393233 transparent #393233 #393233;
    border-style: solid;
    border-width: 12px 12px 12px 12px;
}

I have created a jsfiddle to express my code.
http://jsfiddle.net/2Cn3a/
Any help is much appreciated 

A:

One solution would be to use li instead of li a as relative element, so you can add one more :after to it as well. See it in action: http://jsfiddle.net/z47fN/ 

