Left Nav css triangle

by niki4810

HTML

<ul>
    <li> <a href="#">Home</a> 
    </li>
    <li class="active"> <a href="#">About us</a> 
    </li>
    <li> <a href="#">Contact us</a> 
    </li>
</ul>

CSS

*{
    box-sizing: border-box;
    -webkit-box-sizing : border-box;
    -moz-box-sizing: border-box;
}
ul {
    list-style :none;
    line-height: 24px;
    box-shadow : 3px 0 6px #d8d8d8;
    width : 188px;
    padding : 0px;
}
ul > li > a {
    display: block;
    width: 188px;
    text-decoration : none;
    border : 1px solid #ccc;
    border-left :0px;
    border-right:0px;
}
ul > li > a {
    text-decoration : none;
}
ul > li.active > a, ul > li.active > a:hover, ul > li > a:hover {
    background-color : blue;
    color : #fff;
    border: 0;
}
ul > li{
    position : relative;
    width : 200px;
}
ul > li.active >a:after {
    content :'';
    float: left;
    position: absolute;
    right : 0;
    top : 0;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent transparent transparent blue;
}