ХТМЛ
Можете их направити помоћу једног див-а. Лепо је имати часове за сваку могућност смера.
ЦСС
Идеја је кутија са нултом ширином и висином. Стварна ширина и висина стрелице одређује се ширином обруба. На пример, у стрелици нагоре доња ивица је обојена док су лева и десна провидне, што чини троугао.
.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; )Демо
Погледајте Анимацију оловке за објашњавање ЦСС троуглова Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
Примери
Даве Еверитт пише у:
За једнакостранични троугао вреди истаћи да је висина 86,6% ширине, па (граница-лева-ширина + граница-десна-ширина) * 0,866% = граница-ширина дна