Pure CSS breadcrumbs

Use of pure CSS to create visually stunning breadcrumbs.

by Entoarox

HTML

<p>Pure CSS breadcrumbs, works in any browser that supports :before and :after (IE8+)<br />For the round caps to work the :last-child pseudo class was required, thus IE9+ is required for these.<br />
    The second set of breadcrumbs shows how they look in IE8 without support for the rounded caps.<br />For people who like this look better, simply adding 'nrc' as a class to the &lt;nav&gt; element that holds the menu is enough to prevent the caps from generating.</p>
<hr />
<nav class="breadcrumbs">
    <a>Breadcrumb</a>
    <a>Breadcrumb</a>
    <a>Breadcrumb</a>
    <a>Breadcrumb</a>
    <a>Breadcrumb</a>
</nav>
<hr />
<nav class="breadcrumbs nrc">
    <a>Breadcrumb</a>
    <a>Breadcrumb</a>
    <a>Breadcrumb</a>
    <a>Breadcrumb</a>
    <a>Breadcrumb</a>
</nav>

<hr />
<nav class="breadcrumbs nrc">
    <a>Read more</a>
</nav>

CSS

nav.breadcrumbs
{
    display:block;
    margin:0px;
    padding:0px;
    min-height:30px;
    line-height:30px;
    position:relative;
    font-family:Arial;
    font-weight:bold;
    padding-right:15px;
    color:#fff;
}
nav.breadcrumbs a
{
    float:left;
    background:#800;
    position:relative;
    margin-left:17px;
    padding:0 5px;
}
nav.breadcrumbs a:before,nav.breadcrumbs a:after
{
    content:"";
    position:absolute;
    display:block;
}
nav.breadcrumbs a:before
{
    top:0px;
    left:-15px;
    width: 0;
	height: 0;
	border-top: 15px solid #800;
    border-bottom:15px solid #800;
	border-left: 15px solid transparent;
}
nav.breadcrumbs a:after
{
    top:0px;
    right:-15px;
    width: 0;
	height: 0;
	border-top: 15px solid transparent;
    border-bottom:15px solid transparent;
	border-left: 15px solid #800;
}
nav.breadcrumbs a:hover
{
    background:#a00;
}
nav.breadcrumbs a:hover:before
{
    border-top-color:#a00;
    border-bottom-color:#a00;
}
nav.breadcrumbs a:hover:after
{
    border-left-color:#a00;
}
nav.breadcrumbs:not(.nrc) a:nth-child(1):before
{
    border:0px;
    width:15px;
    height:30px;
    border-radius:15px 0 0 15px;
    background:#800;
}
nav.breadcrumbs:not(.nrc) a:last-child:after
{
    border:0px;
    width:15px;
    height:30px;
    border-radius:0 15px 15px 0;
    background:#800;
}
nav.breadcrumbs:not(.nrc) a:nth-child(1):hover:before,nav.breadcrumbs:not(.nrc) a:last-child:hover:after
{
    background:#a00;
}