Navegación de ruta de navegación con triángulos CSS | Programar Plus

¿Sabías que puedes hacer triángulos con CSS puro? Es bastante sencillo. Simplemente crea un elemento a nivel de bloque con ancho y alto cero, un borde de color en un lado y bordes transparentes en los dos lados adyacentes. Son divertidos para todo tipo de cosas, como una pequeña flecha que sobresale de los bocadillos, punteros de navegación y más. A menudo, estos son solo florituras visuales, que no merecen un marcado dedicado. Afortunadamente, los elementos pseduo suelen encajar perfectamente. Es decir, usando ::before, ::after, o ambos para crear estos elementos a nivel de bloque y colocar el triángulo. Un buen uso que me vino a la mente en este sentido: navegación con rutas de navegación.

El marcado HTML

Mantengamos las cosas tan absolutamente limpias como sea posible y vayamos con una lista simple desordenada con una clase de “ruta de navegación”:

<ul class="breadcrumb">
  <li><a href="https://css-tricks.com/triangle-breadcrumbs/#">Home</a></li>
  <li><a href="https://css-tricks.com/triangle-breadcrumbs/#">Vehicles</a></li>
  <li><a href="https://css-tricks.com/triangle-breadcrumbs/#">Vans</a></li>
  <li><a href="https://css-tricks.com/triangle-breadcrumbs/#">Camper Vans</a></li>
  <li><a href="https://css-tricks.com/triangle-breadcrumbs/#">1989 VW Westfalia Vanagon</a></li>
</ul>

El CSS

Primero, nos aseguraremos de que nuestra lista no se vea como una lista típica. Eliminaremos los estilos de lista predeterminados, colocaremos los elementos a la izquierda y configuraremos un estilo muy básico para cada enlace. Tenga en cuenta el desbordamiento oculto en la lista en sí, esto será útil por dos razones. Uno, asegura que el menú tenga altura. Los contenedores que contienen solo elementos flotantes colapsan, lo que a menudo no es ideal. Dos, cuando hagamos nuestros triángulos, los haremos grandes.

.breadcrumb { 
  list-style: none; 
  overflow: hidden; 
  font: 18px Sans-Serif;
}
.breadcrumb li { 
  float: left; 
}
.breadcrumb li a {
  color: white;
  text-decoration: none; 
  padding: 10px 0 10px 65px;
  background: brown; /* fallback color */
  background: hsla(34,85%,35%,1); 
  position: relative; 
  display: block;
  float: left;
}

Para crear el triángulo, usaremos el ::after selector para hacer un pseudo elemento. Será a nivel de bloque, de altura y ancho cero, y absolutamente posicionado al 100% a la izquierda, lo que significa que comenzará en el borde derecho de su padre. Lo colocaremos al 50% desde la parte superior y lo tiraremos hacia arriba -50px con margen, lo que asegurará que esté absolutamente centrado. Este es un truco clásico. Algunas otras cosas a tener en cuenta. Los bordes que usaremos son 50px en la parte superior, 50px en la parte inferior y a la izquierda (formando una flecha hacia la derecha) solo 30px. Esto significa una flecha de cara más plana. Si fuéramos más altos de 50px, sería más afilado. Igual a 50px lo convertiría en 90 grados perfectos. Debido a que los bordes superior e inferior son de 50 px cada uno, la altura de la flecha es de 100 px. 100px es mucho más alto de lo que es probable que nuestro menú sea con su tamaño de fuente de 18px y 10px de relleno superior e inferior. Ésto es una cosa buena. Significa que tenemos mucho espacio para jugar ajustando el tamaño de la fuente sin preocuparnos de que el triángulo muestre su límite.

.breadcrumb li a::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  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; 
}

¿Observa la pequeña línea blanca de separación de 1 px? Ese es otro pequeño truco. ¡No podemos agregar un borde directamente al triángulo porque ya está hecho de un borde! En su lugar, haremos otro triángulo, lo colocaremos detrás de nuestro triángulo original y lo colorearemos de blanco. Este usa el ::before selector, pero por lo demás es exactamente el mismo. Tenga en cuenta que el índice Z es lo importante aquí. Podrías cambiar qué triángulo usa ::after y que usa ::before, realmente no importa.

.breadcrumb li a::before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  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; 
}

Ahora sobre la coloración. Dado que vamos a ir un poco progresivos aquí, hay dos bits de CSS que creo que son combinaciones perfectas para esta idea: nth-child y HSLa.

  • Lo bueno de nth-child: podemos colorear los diferentes niveles de la ruta de navegación sin marcado adicional
  • Lo bueno de HSLa: podemos colorear los diferentes niveles de las migas de pan en función de un solo tono con diferentes tonos muy fácilmente

Además de la coloración, haremos que el primer enlace tenga menos relleno a la izquierda (menos necesario, un triángulo no está en su parrilla) y haremos que el último enlace no tenga ningún color y no responda. para hacer clic o mostrar un cursor de puntero. También podemos hacer esto sin necesidad de marcado adicional a través de :first-child y :last-child.

.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: transparent !important;
  color: black;
  pointer-events: none;
  cursor: default;
}
.breadcrumb li:last-child a::after { 
  border: 0; 
}

Y finalmente, estados flotantes. El único truco aquí es que necesitamos colorear el triángulo y el enlace. No es gran cosa.

.breadcrumb li a:hover { 
  background: hsla(34, 85%, 25%, 1); 
}
.breadcrumb li a:hover:after { 
  border-left-color: hsla(34, 85%, 25%, 1) !important; 
}

Compatibilidad con navegadores más profundos

Llámame un saco vago, pero no me molesté en lidiar con una compatibilidad de navegador muy profunda. Estaba más emocionado con la idea que pensando en la producción. Si desea utilizar esta idea, pero le preocupan los navegadores más antiguos, aquí hay algunas cosas en las que debe pensar:

  • No use hsla() para colorear, use códigos hexadecimales
  • No use :nth-child para colorear, asigne a cada elemento de la lista un nombre de clase
  • Para navegadores que no son compatibles ::after/::before, utilice un sistema basado en imágenes. Este es mi tutorial favorito de migas de pan basado en imágenes.
  • Utilice Modernizr para la detección de funciones (como HSLa)
  • Utilice hojas de estilo condicionales para IE

Disfrutar

Este es el ejemplo que cubrimos y algunas variaciones:

Vea las migas de pan triangulares de CSS de Pen de Programar Plus(@ css-tricks) en CodePen.