CSS Chevron - Two Triangles

Create chevrons in all modern browsers including IE8+

by Kevin Kirchner

HTML

<h1>Text before <i class="chevron skinny"></i> text after</h1>
<h1>Text before <i class="chevron"></i> text after</h1>
<h1>Text before <i class="chevron fat"></i> text after</h1>
<p>Text before <i class="chevron skinny"></i> text after</p>
<p>Text before <i class="chevron"></i> text after</p>
<p>Text before <i class="chevron fat"></i> text after</p>
<small>Text before <i class="chevron skinny"></i> text after</small>
<small>Text before <i class="chevron"></i> text after</small>
<small>Text before <i class="chevron fat"></i> text after</small>
<pre>Try these <a href="http://stackoverflow.com/questions/15938933/creating-a-chevron-in-css">other chevron options</a></pre>

CSS

h1 { font-size:2em; }
p { font-size:1em; }
small { font-size: .8em; }

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