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% = граница-долна ширина