Cómo crear breadcumb triangulares con CSS

En Apple las utilizan, nosotros las usábamos en el diseño anterior de este blog, son las hermosas breadcumb triangulares. Pero, ¿sabías que se pueden crear con CSS?

En css-tricks.com publicaron un detallado tutorial (en inglés) que epxlica paso pasado como implementar el mecionado elemento de diseño web en cualquier desarrollo. Además de la explicación, están los archivos disponibles para descagar gratuitamente.

Implementación

Código HTML:

<div id="page-wrap">
<h1>CSS Triangle Breadcrumbs</h1>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Vans</a></li>
<li><a href="#">Camper Vans</a></li>
<li><a href="#">1989 VW Westfalia Vanagon</a></li>
</ul>
</div>

Código CSS:

<style>
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;

/* fallback color */

background: brown;
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: ” “;
display: block;
width: 0;
height: 0;

/* Go big on the size, and let overflow hide */

border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: ” “;
display: block;
width: 0;
height: 0;

/* Go big on the size, and let overflow hide */
border-top: 50px solid transparent;           
border-bottom: 50px solid transparent;

border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
background: white !important;
color: black;
pointer-events: none;
cursor: default;
}
.breadcrumb li:last-child a:after { border: 0; }
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }
</style>
Para adaptar los colores al diseño del sitio, sólo es cuestión de modificarlos en el código de la CSS. Igualmente para lograr compatibilidad entre los diferentes navegadores hay que tener en cuenta:

• Usar sólo colores en código hexadecimales.
• Dar a cada elemento en la lista su propio nombre.
• Usar declaración condicional de estilos para IE.
• Usar una imagen para los navegadores que no soportan :after/:before.

Breadcrumb Navigation with CSS Triangles

Tutorial: css-tricks.com/triangle-breadcrumbs