HTML
Saate neid teha ühe div-ga. Tore, kui igas tunnis on klassid.
CSS
Idee on null laiuse ja kõrgusega kast. Noole tegeliku laiuse ja kõrguse määrab ääre laius. Näiteks ülespoole suunatud noolel on alumine piir värviline, vasak ja parem on läbipaistvad, mis moodustab kolmnurga.
.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
Vaadake Chris Coyieri (@chriscoyier) CodePenil olevat pliiatsi animatsiooni CSS-i kolmnurkade selgitamiseks.
Näited
Dave Everitt kirjutab:
Võrdkülgse kolmnurga puhul tasub märkida, et kõrgus on 86,6% laiusest, nii et (piir-vasak-laius + piir-parem-laius) * 0,866% = ääris-põhi-laius