problema de estouro de trilha

Question

Eu encontrei um tutorial de localização atual css3 e fiz algumas edições nele (embora a versão do tutorial tivesse o mesmo problema) e descobri que se a localização atual fosse para uma nova linha, ela falharia miseravelmente devido ao uso de overflow:hidden para ocultar o pseudoelementos...

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; 
}

Aqui está o violino... http://jsfiddle.net/kGgNb/40/

Tentei fazer alterações no CSS para corrigir isso, mas não consigo ver uma maneira de alterar os pseudoelementos sem torná-los mais estreitos, mas isso também significaria ter pontos extremamente pontiagudos.

O HTML está sendo renderizado no servidor, a melhor solução que consigo pensar é fazer algumas verificações antes de ser renderizado para verificar quantos elementos serão gerados e, em seguida, apenas jogar os que estouraram além de um determinado tamanho de tela dentro de uma nova lista e recomeçando cada vez que atinge essa largura.

Outra ideia que um colega teve foi usar uma imagem para os pontos, mas prefiro fazer uma correção de CSS, se isso for possível.

Alguma outra idéia/correção?

Obrigado.

Atualizar - Desculpe, vou esclarecer.Não quero que as setas apareçam, a versão correta da localização atual ficará assim.http://jsfiddle.net/kGgNb/49/

O problema é usar bordas e altura para fazer triângulos em css3, por causa do ponto que quero para o triângulo, os pseudoelementos têm que ser bem grandes, configurar overflow:hidden resolve esse problema eliminando as sobras, mas quando a farinha de rosca abranger uma linha na página, surgem problemas.

Eu poderia usar o skew, mas não funcionaria no IE8.

Answer 1

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

Basta diminuir a seta, aqui estão as alterações:

.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;
}