HTML
Вы можете сделать их с помощью одного div. Приятно иметь классы для каждого направления.
CSS
Идея - это коробка с нулевой шириной и высотой. Фактическая ширина и высота стрелки определяется шириной границы. Например, при стрелке вверх нижняя граница окрашена, а левая и правая прозрачные, что образует треугольник.
.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; )Демо
См. «Анимацию пера для объяснения треугольников CSS» Криса Койера (@chriscoyier) на CodePen.
Примеры
Дэйв Эверитт пишет:
Для равностороннего треугольника стоит отметить, что высота составляет 86,6% от ширины, поэтому (ширина границы-слева + ширина-границы-справа) * 0,866% = ширина-границы-дна