CSS3 para mejorar el breadcrumb de un tema Zen

CSS3 está permitiendo hacer muchas cosas interesantes que antes requerían además javascript o imágenes de apoyo.

Por ejemplo, usando sólo CSS se puede hacer que la lista de breadcrumbs se vea como:

La idea es independiente del tema. En este caso, la ilustraré con un subtema Zen.

Configuración del tema
Normalmente hay un caracter de separación para los términos del breadcrumb. Ingresar a la configuración del tema e indicar que no se use ninguno. También indicar que no se agregue dicho caracter al final de la lista.

HTML
De ese modo, el HTML del breadcrumb será similar a:

<div class="breadcrumb">
  <a href="/drupal/inmobiliaria/">Inicio</a>
  <a href="/drupal/inmobiliaria/admin">Administrar</a>
  <a title="Controla la apariencia del sitio."
    href="/drupal/inmobiliaria/admin/build">Construcci&#195;&#179;n
    del sitio</a>
  <a title="Cambia el tema que usa el sitio o permite que los usuarios lo elijan."
    href="/drupal/inmobiliaria/admin/build/themes">Temas</a>
</div>

Es decir, una lista simple de enlaces bajo la clase breadcrumb.

CSS
En el archivo css/pages.css del tema:

...
.breadcrumb /* The path to the current page in the form of a list of links */ {
  padding-bottom: 0; /* Undo system.css */
}
.breadcrumb a {
  text-decoration: none;
  background-color: #fa4;
  display: inline-block;
  line-height: 20px;
  padding-left: 10px;
  border-left: 3px solid #fff;
}
.breadcrumb a:first-child {
  border-left: none;
}
.breadcrumb a:hover {
  background-color: #fea;
}
.breadcrumb a:hover:after {
  border-left-color: #fea;
}
.breadcrumb a:after {
  content: " ";
  width: 0;
  height: 0;
  position: absolute;
  border-top: 10px solid transparent;
  border-left: 8px solid #fa4;
  border-bottom: 10px solid transparent;
  margin: 0;
  z-index: 2;
}
.breadcrumb a:before {
  content: " ";
  width: 0;
  height: 0;
  position: absolute;
  border-top: 10px solid transparent;
  border-left: 8px solid #fff;
  border-bottom: 10px solid transparent;
  margin-left: -10px;
}
.breadcrumb a:first-child:before {
  content: " ";
  width: 0;
  height: 0;
  position: relative;
  border: none;
  margin-left: -5px;
}
...

• La idea es formar los triángulos en los extremos de cada enlace, darles los colores adecuados y luego superponerlos para que se concatenen los items.
• Los enlaces se muestran con inline-block para establecer sus dimensiones (con line-height).
• Se usa el pseudo selector :after para agregar después de cada enlace un triángulo del mismo color de fondo.
• Para lograr el triángulo se usa un truco. El browser dibuja una diagonal en el cruce de un borde horizontal y vertical, si son de diferente color. Esto se aprecia en los bordes gruesos.
  Entonces, si se hace una caja de 0px por 0px con bordes de 5px, del mismo color de fondo para el izquierdo y transparente para el superior e inferior, se tendrá un triángulo apuntando a la derecha.
• Para darle un borde al triángulo, se usa el pseudo selector :before para agregar antes de cada enlace un triángulo de color blanco que calce debajo del triángulo del bloque anterior y ligeramente desfasado.
• Para diferenciar el primer enlace de los demás, se usa el pseudo selector :first-child
• Además, se usa el pseudo selector :hover para proveer un cambio de color al pasar el mouse.
• El borde dibujado con los triángulos solapados tiene un espacio en los vértices de su base. Para mejorar eso, se dibuja una línea del mismo color en el lado izquierdo de cada enlace, excepto el primero.
• Se usan márgenes y paddings para posicionar los elementos.

Ojalá esta técnica te sirva de ayuda.