CSS navigation with cut-out notch as marker

[Magnuzza]

I know I have seen this somewhere before, but I am trying to create a black fixed navbar with a marker that is transparent cut-out triangle. I need help getting the triangle cut-out to be transparent to the background, so when you scroll the page, you can see through to the content beneath:I have a standard list/anchor navigation with a javascript to move the .current class depending upon the page section:\[code\]<div class="navbar"><ul> <li class="current"><a>home</a></li> <li><a>products</a></li> <li><a>services</a></li> <li><a>contact us</a></li></ul></div>\[/code\]styled with the following CSS:\[code\].navbar { width: 100%; position: fixed; background: black; float: left;}ul, li { list-style: none; margin: 0; padding: 0; float: left;}a { padding: 10px 20px 20px;}.current a { background: transparent url('../img/wedge-red.png') center bottom no-repeat; }\[/code\]The only way I can think to do it is to add extra divs on either side of the ul and assign the background to them, and then use a transparent png with a cutout as the background of the li a's.Is there a way to do this without getting really ugly like that, and adding extra divs?