HTML
Puedes hacerlos con un solo div. Es bueno tener clases para cada posibilidad de dirección.
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 la izquierda y la derecha 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
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-izquierdo-ancho + borde-ancho-derecho) * 0.866% = borde-fondo-ancho