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

css

figure{
    width:400px;
    height:320px;
    background:skyblue url(http://img1.wikia.nocookie.net/__cb20140301204257/disney/images/4/49/Elsa-Anna.jpg);
    border:4px solid rgba(0,0,0,.8);
    margin:40px auto;
    position:relative;
}
figure div{
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:200px;
    background:rgba(255,255,255,.1);
}

figure div:before{
    content:'';
    position:absolute;
    width:0px;
    height:0px;
    left:50%;
    top:-40px;
    margin-left:-40px;
    border-bottom:40px solid rgba(255,255,255,.1);
    border-left:40px solid transparent;
    border-right:40px solid transparent;
}

Demo

or if you want to apply it to a menu

    
Home
    
Work
 
    
Projects
 
    
Infos
 

css

menu{
    margin-top:40px;
}
menu li{
    float:left;
    list-style:none;
    position:relative;
}
menu li{
    padding:20px; 40px;
}
menu li:hover:before{
    content:'';
    position:absolute;
    width:0px;
    height:0px;
    left:50%;
    top:-20px;
    margin-left:-20px;
    border-bottom:20px solid rgba(0,0,0,.8);
    border-left:20px solid transparent;
    border-right:20px solid transparent;
}

Demo with Hover

to use the active class jst change menu li:hover:before to menu li.active:before