HTML
Voit tehdä ne yhdellä div. On mukavaa pitää kursseja kumpaankin suuntaan.
CSS
Idea on laatikko, jonka leveys ja korkeus on nolla. Nuolen todellinen leveys ja korkeus määräytyy reunan leveyden mukaan. Esimerkiksi ylänuolessa alaraja on värillinen, kun taas vasen ja oikea ovat läpinäkyviä, mikä muodostaa kolmion.
.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
Katso Chris Coyierin (@chriscoyier) kynäanimaatio CSS-kolmioiden selittämiseksi CodePenissä.
Esimerkkejä
Dave Everitt kirjoittaa:
Tasasivuisen kolmion kohdalla on syytä huomauttaa, että korkeus on 86,6% leveydestä, joten (raja-vasen-leveys + reuna-oikea-leveys) * 0,866% = reuna-ala-leveys