HTML
Možete ih napraviti s jednim divom. Lijepo je održati nastavu za svaku mogućnost smjera.
CSS
Ideja je kutija nulte širine i visine. Stvarna širina i visina strelice određuje se širinom obruba. Primjerice, u strelici prema gore donja je granica obojena dok su lijeva i desna prozirne što tvori trokut.
.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
Pogledajte animaciju olovke za objašnjenje CSS trokuta Chrisa Coyiera (@chriscoyier) na CodePenu.
Primjeri
Dave Everitt piše u:
Za jednakostranični trokut vrijedi istaknuti da je visina 86,6% širine, dakle (obod-lijeva-širina + obod-desna-širina) * 0,866% = obrub-dna-širina