HTML
Puoi realizzarli con un singolo div. È bello avere lezioni per ogni possibilità di direzione.
CSS
L'idea è una scatola con larghezza e altezza zero. La larghezza e l'altezza effettive della freccia sono determinate dalla larghezza del bordo. In una freccia in alto, ad esempio, il bordo inferiore è colorato mentre quello sinistro e destro sono trasparenti, il che forma il triangolo.
.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
Vedere l'animazione della penna per spiegare i triangoli CSS di Chris Coyier (@chriscoyier) su CodePen.
Esempi
Dave Everitt scrive in:
Per un triangolo equilatero vale la pena sottolineare che l'altezza è l'86,6% della larghezza quindi (bordo-sinistra-larghezza + bordo-destra-larghezza) * 0,866% = bordo-fondo-larghezza