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

Solution 1:

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/

Solution 2:

If you add a span after the a tag you can create another arrow inside the li.

http://jsfiddle.net/2Cn3a/1/

<style>span {
  position: absolute;
  float:left;
  background-color: transparent;
  border-color: transparent transparent transparent #393233;
  border-style: solid;
  border-width: 12px12px12px23px;
}
</style><nav><li><ahref="#">Hello</a><span></span></li></nav>