breadcrumb overflow issue

Question

I found a css3 breadcrumb tutorial and made a few edits to it (though the tutorial version had the same problem), and found that if the breadcrumb went onto a new line then it would fail miserably due to it using overflow:hidden to hide the pseudo elements...

html

<ul class="crumb">
    <li><a href="#">Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
</ul>

css

.crumb {
    list-style: none; 
    overflow: hidden;
    margin-bottom: 3px;
}
.crumb li {
    line-height: inherit;
}
.crumb li a {
    color: white;
    text-decoration: none; 
    padding: 0 0 0 20px;
    background: #777;
    position: relative; 
    display: block;
    float: left;
    border: solid 2px #777;
    font-size: 10px;
}
.crumb li a:after { 
    content: " "; 
    width: 0; 
    height: 0;
    line-height: 0;
    border-top:25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid #777;
    position: absolute;
    top: 50%;
    margin-top: -25px; 
    left: 100%;
    z-index: 2; 
}   
.crumb li a:before { 
    content: " ";
    width: 0; 
    height: 0;
    line-height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid white;
    position: absolute;
    top: 50%;
    margin-top: -25px; 
    margin-left: 2px;
    left: 100%;
    z-index: 1;
}
.crumb li:first-child a {
    padding-left: 8px;
}
.crumb li a:hover { 
    border-color: black;
    background: black;
}
.crumb li a:hover:after { 
    border-left-color: black !important;
}
.crumb li:last-child a:hover:after { 
    border-left-color: #e67e22 !important;
}
.crumb li:last-child a:after { 
    border-left-color: #e67e22 !important;
}
.crumb li:last-child a {
    border-color: #e67e22;
    background: #e67e22; 
}

Here is the fiddle... http://jsfiddle.net/kGgNb/40/

I have attempted to make changes to the css to fix this but can't seem to see a way to change the pseudo elements without making them narrower, but this would also mean having extremely pointy points.

The HTML is being rendered on the server, the best solution I can think of is putting in some checks before its rendered to check how many elements will be generated, and then just throwing any overflowed ones past a certain screen size inside a new list and starting over each time it hits that width.

Another idea a colleague came up with was using an image for the points, but I'd rather stick a a css fix if this is possible.

Any other ideas/fixes?

Thanks.

Update - Sorry, I'll clarify. I don't want the arrows to appear at all, the correct version of the breadcrumbs will look like this. http://jsfiddle.net/kGgNb/49/

The issue is using borders & height to make triangles in css3, because of the point I want for the triangle, the pseudo elements have to be quite large, setting overflow:hidden resolves this issue by getting rid of the leftover, but when the breadcrumbs span over one line on the page, issues arise.

I could use skew, but then it wouldn't work in IE8.

Answer 1

http://jsfiddle.net/kGgNb/50/

Just make the arrow smaller, here's the changes:

.crumb li a:after { 
    ....
    border-top:9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #777;
    ....
    top:-2px;
}   
.crumb li a:before { 
    ....
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid white;
    ....
    top:-2px;
}