Breadcrumbs: Triángulos con CSS

Esta es una de estas cosas que por ahora no funcionará en Internet Explorer pero no importa, igual vale la pena verlo.

Se trata de hacer un breadcrumbs, es decir, mostrar la ruta de la página web donde nos encontramos:

Inicio > Año > Mes > Título de la entrada
Inicio > Etiqueta > Título de la entrada

La idea de css-tricks.com es hacer eso agregándole alguna característica gráfica especial, sin imágenes y utilizando sólo CSS para crear los triángulos.

El HTML es una simple lista con una clase y en cada item, un enlace:

<ul class="breadcrumb">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Categoría</a></li>
  <li><a href="#">Blogger</a></li>
  <li><a href="#">El título de esta entrada</a></li>
</ul>

El resto es el estilo:

<style>
.breadcrumb { /* el rectángulo con la lista */
  list-style: none;
  margin: 0;
  overflow: hidden;
}
.breadcrumb li { /* cada item de la lista */
  float: left;
}
.breadcrumb li a { /* cada item es un enlace */
  color: #FFF;
  display: block;
  float: left;
  font-family: Helvetica;
  font-size: 18px;
  text-decoration: none;
  padding: 10px 0 10px 50px;
  position: relative; 
  /* el color de fondo del item que está a la izquierda */
  background-color: #A0A9B1;
}
.breadcrumb li a:after {
  content: " "; 
  display: block; 
  left: 100%;
  height: 0;
  margin-top: -50px; 
  position: absolute;
  top: 50%;
  width: 0; 
  z-index: 2;
  /* esto creará el primer triángulo */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #A0A9B1;
  border-top: 50px solid transparent;
} 
.breadcrumb li a:before { /* el siguiente enlace */
content: " "; 
  display: block; 
  height: 0;
  left: 100%;
  margin-top: -50px; 
  margin-left: 1px;
  position: absolute;
  top: 50%;
  width: 0; 
  z-index: 1;
  /* el color de fondo del segundo item */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #DEF;
  border-top: 50px solid transparent;
}
/* y los siguientes */
.breadcrumb li:first-child a {padding-left: 10px;}
.breadcrumb li:nth-child(2) a {background-color: #808991;}
.breadcrumb li:nth-child(2) a:after {border-left-color: #808991;}
.breadcrumb li:nth-child(3) a {background-color: #606971;}
.breadcrumb li:nth-child(3) a:after {border-left-color: #606971;}
.breadcrumb li:nth-child(4) a {background-color: #404951;}
.breadcrumb li:nth-child(4) a:after {border-left-color: #404951;}
.breadcrumb li:last-child a {
  background: none repeat scroll 0 0 transparent !important;
  color: #DEF;
  cursor: default;
}
/* el efecto hover */
.breadcrumb li:last-child a:after {border: none;}
.breadcrumb li:last-child a:before {border: none;}
.breadcrumb li a:hover {background-color: #501921;}
.breadcrumb li a:hover:after {border-left-color: #501921 !important;}
</style>

• Inicio
• Categoría
• Blogger
• El título de esta entrada