Cuestión de desbordamiento de pan

Question

Encontré un tutorial de la panorama de CSS3 y hice algunas ediciones (aunque la versión tutorial tenía el mismo problema), y encontré que si la panorámica pasaba a una nueva línea, entonces fallaría miserablemente debido a que usaba el desbordamiento: oculto Para ocultar los 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; 
}

Aquí está el violín ... http://jsfiddle.net/kggnb/40/

He intentado hacer cambios en el CSS para solucionar esto, pero parece que no puede ver una manera de cambiar los elementos pseudo sin hacerlos más estrechos, pero esto también significaría tener puntos extremadamente puntiagudos.

Se está prestando el HTML en el servidor, la mejor solución que puedo pensar es poner en algunos cheques antes de que se le proporcionen para verificar cuántos elementos se generarán y luego lanzarán los desbordados más allá de un tamaño de pantalla determinado dentro de un Nueva lista y comenzando durante cada vez que golpea ese ancho.

Otra idea que se le ocurrió que un colega estaba usando una imagen para los puntos, pero prefiero seguir una solución CSS si esto es posible.

¿Alguna otra idea / corrección?

gracias.

actualización - Lo sentiré, aclararé. No quiero que aparezcan las flechas en absoluto, la versión correcta de las migas de pan se verá así. http://jsfiddle.net/kggnb/49/

El problema está utilizando bordes y altura para hacer triángulos en CSS3, debido al punto que quiero para el triángulo, los Pseudo Elements tienen que ser bastante grandes, establecer un desbordamiento: oculto resuelve este problema al deshacerse de las sobras, pero Cuando las rutas de pan abarcan sobre una línea en la página, surgen problemas.

Podría usar sesgo, pero entonces no funcionaría en IE8.

Answer 1

http://jsfiddle.net/kggnb/50/

Solo haz la flecha más pequeña, aquí están los cambios:

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