HTML
Puedes hacerlos con un solo div. Es bueno tener clases para cada posibilidad de dirección.
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>CSS
La idea es una caja con ancho y alto cero. El ancho y el alto reales de la flecha están determinados por el ancho del borde. En una flecha hacia arriba, por ejemplo, el borde inferior está coloreado mientras que el izquierdo y el derecho son transparentes, lo que forma el triángulo.
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}Manifestación
Vea la animación de lápiz para explicar los triángulos CSS de Chris Coyier (@chriscoyier) en CodePen.
Ejemplos de
Dave Everitt escribe en:
Para un triángulo equilátero, vale la pena señalar que la altura es el 86.6% del ancho, por lo que (borde-ancho-izquierdo + borde-ancho-derecho) * 0.866% = borde-fondo-ancho