CSS Chevron - Three Triangles

Create chevrons in all modern browsers including IE8+

HTML

<i class="chevron skinny"></i>

CSS

.chevron {
    display:inline-block;
    background:red;
    width: .55em;
    height: .75em;
    position:relative;
}
.chevron:before,
.chevron:after {
    display:inline-block;
    content:"";
    width:0;
    height:0em;
    border-style:solid;
    position:absolute;
}
.chevron:before {
    left:0;
    border-width:.4em 0 .4em .4em;
    border-color:transparent transparent transparent #fff;    
}
.chevron:after {
    right:0;
    border-width:.4em 0 .4em .4em;
    border-color:#fff transparent;    
}
.chevron.skinny {
    width:4em;
    height: 4em;
}
.chevron.fat {
    width:.7em;
}