CSS Chevron - Two Triangles

Create chevrons in all modern browsers including IE8+

by Increazon

HTML

<i class="Chevron"></i>

CSS

.Chevron{
    position:relative;
    display:block;
    height:50px;/*height should be double border*/
}
.Chevron:before,
.Chevron:after{
    position:absolute;
    display:block;
    content:"";
    border:10px solid transparent;/*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/
.Chevron:before{
    right:0;
    border-right-color:#b00;/*Chevron Color*/
}
.Chevron:after{
    right:-5px;/*adjust thickness*/
    border-right-color:#fff;/*Match background colour*/
}