HTML
Vous pouvez les créer avec un seul div. C'est bien d'avoir des cours pour chaque possibilité de direction.
CSS
L'idée est une boîte avec une largeur et une hauteur nulles. La largeur et la hauteur réelles de la flèche sont déterminées par la largeur de la bordure. Dans une flèche vers le haut, par exemple, la bordure inférieure est colorée tandis que la gauche et la droite sont transparentes, ce qui forme le triangle.
.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; )Démo
Voir l'animation du stylo pour expliquer les triangles CSS par Chris Coyier (@chriscoyier) sur CodePen.
Exemples
Dave Everitt écrit dans:
Pour un triangle équilatéral, il convient de souligner que la hauteur est de 86,6% de la largeur donc (border-left-width + border-right-width) * 0.866% = border-bottom-width