Navbar active link with a transparent triangle

Question

You know how to do this using CSS?

In my navbar I would like to see a

Answer 1

Will post my solution. It's pretty complicated and though I don't know if there is other simpler way to make li>a nested elements be transparent for the background under ul. This solution uses :before/:after pseudo attributes.

I used this markup (how to avoid helper ?):

    

        
HOMEPAGE 
        
CONTACT 
        
GET OUT 
    

and CSS:

header li a {
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    display: inline-block;
    padding: 25px;
    color: #FFF;
    position: relative;
}
header li a:hover {
    background: rgba(255, 255, 255, .2);
}
header li a i:after, header li a i:before {
    content:'';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    display: none;
    background: url(http://subtlepatterns.com/patterns/escheresque_ste.png);
    background-attachment: fixed;
    border-top: 15px solid rgba(0, 0, 0, .5);
}
header li a.active i:after, header li a.active i:before {
    display: block;
}
header li a:hover i:after, header li a:hover i:before {
    display: block;
    border-top-color: rgba(255, 255, 255, .1);
}
header li a i:before {
    margin-left: -15px;
    border-right: 15px solid transparent;
}
header li a i:after {
    border-left: 15px solid transparent;
}

Hopefully someone will get inspired one day.

Demo: http://jsfiddle.net/R9pKq/