CSS border variation with transparency

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 th开发者_运维技巧e 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?

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.

here you go dude. http://jsfiddle.net/jalbertbowdenii/vnNXW/ just change .trapezoid to .active:active{}

.trapezoid { 

    display:block;

    margin:0;

    padding:0;

    width:1px; 

    height:1px;

    background:transparent;

    border-style: solid;

     border-color:transparent #eee #eee #eee;

    border-width: 50px 50px 50px 50px;

}

and change the border-sizes to fit. for .active{border-color:transparent}