CSS3 Breadcrumb

HTML

<script src="https://raw.github.com/joelpurra/prefixfree/adblock-data-uri-problem/prefixfree.min.js"></script>
<nav>
    <ul id="breadcrumb">
        <li><a href="/">/</a></li>
        <li><a href="/home">home</a></li>
        <li><a href="/home/phil">phil</a></li>
    </ul>
</nav>

CSS

nav > ul {
    overflow: hidden;
    background-color: rgba(0,0,0,.05);
    padding: 0 1ex;
    height: 60px;
}

nav > ul > li {
    float: left;
    position: relative;
    list-style-type: none;
    padding: 2px 0 3px;
    height: inherit;
}

nav > ul > li > a:link,
nav > ul > li > a:visited {
    padding: 2px 1em;
    color: #666;
    text-decoration: none;
    height: inherit;
}

nav > ul > li::after,
nav > ul > li::before {
    content: "";
    display: block;
    width: 100%;
    height: 46%; /*hack: fiddle with this or use opaque colors*/
    position: absolute;
    border: 1px solid rgba(0,0,0,.1);
    border-left-width: 0;
    background-color: rgba(0,0,0,.05);
    pointer-events: none;
}

nav > ul > li:first-of-type::after,
nav > ul > li:first-of-type::before {
    border-left-width: 1px;
}

nav > ul > li::before {
    top: 0;
    border-bottom: none;
    transform: skew(45deg);
}

nav > ul > li::after {
    bottom: 0;
    border-top: none;
    transform: skew(-45deg);
}

nav > ul > li:hover::before {
    background: linear-gradient(top, rgba(0,0,0, 0), rgba(0,0,0,.1)) transparent;
}
nav > ul > li:hover::after  {
    background: linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,.2)) transparent;
}