HTML
Môžete ich vyrobiť pomocou jedinej div. Je pekné mať triedy pre každú možnosť smeru.
CSS
Myšlienka je krabica s nulovou šírkou a výškou. Skutočná šírka a výška šípky je určená šírkou okraja. Napríklad v šípke nahor je dolné ohraničenie sfarbené, zatiaľ čo ľavá a pravá strana sú priehľadné a tvoria trojuholník.
.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; )Ukážka
Pozrite si animáciu pera a vysvetlite CSS Triangles od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
Príklady
Dave Everitt píše:
Pre rovnostranný trojuholník stojí za zmienku, že výška je 86,6% šírky, takže (hranica-ľavá šírka + hranica-pravá šírka) * 0,866% = hranica-spodná šírka