HTML
Lahko jih naredite z enim divjem. Lepo je imeti ure za vsako smer.
CSS
Ideja je škatla z ničelno širino in višino. Dejanska širina in višina puščice se določita s širino obrobe. V puščici navzgor je na primer spodnja obroba obarvana, leva in desna pa sta prozorni, kar tvori trikotnik.
.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
Oglejte si Animacijo pisala za razlago trikotnikov CSS Chrisa Coyierja (@chriscoyier) na CodePen.
Primeri
Dave Everitt piše v:
Za enakostranični trikotnik velja poudariti, da je višina 86,6% širine, torej (meja-leva-širina + meja-desna-širina) * 0,866% = meja-spodnja širina