HTML
Můžete je vyrobit pomocí jediného div. Je hezké mít třídy pro každou možnost směru.
CSS
Myšlenkou je box s nulovou šířkou a výškou. Skutečná šířka a výška šipky je určena šířkou ohraničení. Například v šipce nahoru je spodní ohraničení barevné, zatímco levá a pravá jsou průhledné, což tvoří trojúhelní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ázka
Podívejte se na animaci pera a vysvětlete CSS Triangles od Chrisa Coyiera (@chriscoyier) na CodePen.
Příklady
Dave Everitt píše:
U rovnostranného trojúhelníku stojí za zmínku, že výška je 86,6% šířky, takže (border-left-width + border-right-width) * 0,866% = border-bottom-width