HTML
Je kunt ze maken met een enkele div. Het is leuk om lessen te hebben voor elke richtingsmogelijkheid.
CSS
Het idee is een doos zonder breedte en hoogte. De werkelijke breedte en hoogte van de pijl wordt bepaald door de breedte van de rand. In een pijl-omhoog is bijvoorbeeld de onderste rand gekleurd terwijl de linker- en rechterkant transparant zijn, wat de driehoek vormt.
.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
Zie de Pen-animatie om CSS-driehoeken uit te leggen door Chris Coyier (@chriscoyier) op CodePen.
Voorbeelden
Dave Everitt schrijft in:
Voor een gelijkzijdige driehoek is het de moeite waard erop te wijzen dat de hoogte 86,6% van de breedte is, dus (border-left-width + border-right-width) * 0,866% = border-bottom-breedte