CSS border variation with transparency

Question

I'm trying to make an HTML/CSS menu in which the active link is indicated by a section of transparency (a pointer notched out of the border), to reveal the image behind the menu.

This is what I'm going for: http://larsakerson.com/northendgreenway/beta3.html

But with this sort of notched pointer: http://larsakerson.com/northendgreenway/beta2.html

Is there any way to do this in CSS (either 2.1 or 3), or is a strictly image-based menu the only way to make this work?

Answer 1

You can make a notched corner using borders like so...

div {
   width: 0;
   height: 0;
   border-width: 20px;
   border-style: solid;
   border-color:  transparent blue blue blue;
   background: transparent; 
}

jsFiddle.

Refer to the jsFiddle and notice the top corner is letting the background through. Simply adapt this example to your site.