HTML
Készítheti őket egyetlen osztással. Örülök, hogy minden irányra van lehetőség órára.
CSS
Az ötlet egy nulla szélességű és magasságú doboz. A nyíl tényleges szélességét és magasságát a határ szélessége határozza meg. Például egy felfelé mutató nyílnál az alsó határ színes, míg a bal és a jobb átlátszó, ami a háromszöget alkotja.
.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; )Demó
Lásd: Chris Coyier (@chriscoyier) tollal készített animációja a CSS háromszögek magyarázatához a CodePen-en.
Példák
Dave Everitt a következőket írja:
Egyenlő oldalú háromszög esetén érdemes kiemelni, hogy a magasság a szélesség 86,6% -a, tehát (határ-bal-szélesség + jobb-jobb-szélesség) * 0,866% = határ-alsó-szélesség