CSS overlapping arrow

I'm trying to accomplish something very, very similar to the below picture with CSS3 only.

The only difference is that the last div would have a pointed tip.

In my search for something similar to adapt, I've come across this js fiddle which comes very close to what I want to do, but introduces two problems: first, it's done with canvas, and second, it forces me to "draw" arrows effectively twice for each arrow -- one for the div, and one for the space before the next arrow. There has to be some cleaner way of doing this -- can someone provide me with some direction here?

What I need to know is how to construct what's shown in the above picture -- a series of overlapping div arrows -- with CSS3 only.

Solution 1:

Try this - http://jsfiddle.net/ksNr3/8/

ul {
    margin: 20px 60px;
}

ul li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 100px;
    margin: 5px 1px 0 0;
    text-indent: 35px;
    position: relative;
}

ul li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: -2px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

ul li:first-child:before {
    border-color: transparent;
}

ul li a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -15px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #ccc;
    z-index: 10;
}

ul li.active a {
    background: orange;
    z-index: 100;
}

ul li.active a:after {
    border-left-color: orange;
}

ul li a {
    display: block;
    background: #ccc;
}

ul li a:hover {
    background: pink;
}

ul li a:hover:after {
    border-color: transparent transparent transparent pink; 
}
​

UPDATED - Made it clickable and minimized the overlapping areas - http://jsfiddle.net/ksNr3/8/

Solution 2:

The following CSS3 Solution does not use any images and is easy to work with.

I have created TWO fully commented examples that can be expanded further.

One example has arrows that are "visually" stacked against each other.

The other example is just like the image in your Question, with "end-caps" on the arrows.

Each example has a simple jQuery .click() event listener so you can see no matter where you are clicking in the breadcrumb, the anchor will receive the correct click event. Arrow tails work correctly.

Screenshot shows active CSS hover for NavBar's breadcrumb:

When CSS is disabled in the browser, the breadcrumb navigation gracefully falls back for accessibility requirements.

Reference:    jsFiddle