HTML
Você pode fazê-los com um único div. É bom ter aulas para cada possibilidade de direção.
CSS
A ideia é uma caixa com largura e altura zero. A largura e altura reais da seta são determinadas pela largura da borda. Em uma seta para cima, por exemplo, a borda inferior é colorida enquanto a esquerda e a direita são transparentes, o que forma o 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; )Demo
Veja a animação da caneta para explicar os triângulos CSS por Chris Coyier (@chriscoyier) no CodePen.
Exemplos
Dave Everitt escreve em:
Para um triângulo equilátero, vale a pena apontar que a altura é 86,6% da largura, então (borda-esquerda-largura + borda-direita-largura) * 0,866% = borda-fundo-largura