Comment faire des triangles CSS ou des flèches CSS
Faire des triangles CSS (ou des flèches CSS) est une tâche assez courante de l’interface utilisateur. Si vous voulez construire une infobulle ou n’importe quel menu déroulant, il est possible, voire probable que vous en ayez besoin.
Il y a des cas où vous voulez connecter deux éléments visuellement – une solution à ce problème pour pointer l’un des composants vers l’autre ; c’est là que le triangle CSS entre en jeu.
Comme vous le verrez, nous pouvons réaliser la solution désirée de bien des façons – comme toujours en CSS – mais aussi avec des scripts, des librairies, des images svg… Dans ce billet, je vous montre une solution 100% CSS.
Triangles CSS en utilisant les bordures
Cette solution est un hack qui apparaît souvent en CSS. Bien que cette solution soit délicate, elle fonctionne à merveille.
En CSS, si vous créez des bordures, vous pouvez les styliser complètement séparément (en haut, à droite, en bas, à gauche). Les côtés séparés sont reliés entre eux en diagonale (45°) comme un vrai cadre photo ou une bordure de parquet. En raison de ce comportement, nous pouvons créer des triangles si nos éléments stylisés n’ont pas de largeur ou de hauteur. Après cela, nous devons définir des arrière-plans transparents aux bordures qui ne sont pas nécessaires.
See the Pen Triangles CSS : via les bordures by Siddhy (@Siddhyn) on CodePen.
Les étapes suivantes sont nécessaires :
- Créez un élément séparé ou “stylisez” les ::before/:::after pseudo élément (Vous pouvez aussi créer des élements en JS en manipulant le DOM).
- Sélectionnez la direction de votre flèche. Vous devez colorer les différentes bordures de la direction. Si vous voulez pointer le haut, alors vous devez colorer le bord inférieur.
- Réglez la largeur de vos flèches, c’est un peu délicat. Dans le cas d’une flèche du haut, notre largeur sera la largeur du bord gauche plus la largeur du bord droit, mais notre hauteur ne sera que la largeur du fond.
- Réglez la position. La plupart du temps, vous devrez mettre une position absolue.
Triangles CSS en utilisant Clip-path
Le clip-path est une fonctionnalité CSS plus récente, partiellement supportée. En l’utilisant, nous pouvons masquer des éléments sous n’importe quelle forme primitive. C’est comme lorsque vous dessinez des formes SVG dans votre programme graphique.
Il s’agit d’une section complexe de spécifications, donc si vous êtes intéressé à en savoir plus, veuillez visiter MDN.
See the Pen Triangles CSS : via Clip-path by Siddhy (@Siddhyn) on CodePen.
A propos de notre exemple : en dessinant un triangle, nous avons besoin de la fonction polygon() où nous devons mettre en place un point par rapport aux bords de notre conteneur après avoir défini la largeur, la hauteur, et la couleur de fond.
En utilisant polygon() nous pouvons déclarer n’importe quel point si nous voulons. Pour plus d’infos et de forme, vous pouvez visiter ce super éditeur en ligne.
Le plus grand inconvénient de cette solution est la prise en charge du navigateur. Si vous voulez l’utiliser, vous devez mettre en place une solution de repli. Sinon, c’est la meilleure réponse, et non pas la plus rusée, à ce problème.
Parce qu’il s’agit d’un masque, nous pouvons trouver n’importe quelle solution créative comme un fond dégradé.
Triangles CSS avec la transformation de rotation
En utilisant la transformation, nous pouvons faire pivoter un élément de 45 degrés pour cacher ses parties survolées. Il semble que cette solution soit exagérée et qu’elle soit basée sur les précédentes, mais il peut y avoir des cas où cette solution sera plus pratique à utiliser pour vous
See the Pen Triangle CSS : via la transformation rotation by Siddhy (@Siddhyn) on CodePen.
Dans les exemples, nous avons créé un élément carré et un sous-élément sur le ::before. Le sous-élément a la largeur et la hauteur de l’original divisées par 1,41 (parce que nous devons régler la plus petite hypoténuse à la largeur de la plus grande). Notez que vous devez également définir la position et l’origine de la transformation en fonction de la direction.
Triangles CSS avec entités HTML
L’utilisation d’une entité HTML est une solution basique, mais elle pourrait fonctionner dans des cas plus simples. Je suis toujours surpris du nombre d’endroits où je vois des entités en pratique. Cette solution est moins esthétique (car on ne peut pas changer la forme des triangles) mais elle à le mérite d’exister et d’être vraiment rapide à mettre en place. A réserver aux cas les plus simples avec aucun besoin de mise en forme.
Pour les utiliser, ajoutez l’un d’eux à la propriété “content” des pseudo-éléments ::before ou ::after
◄ : ◄ ► : ► ▼ : ▼ ▲ : ▲Conclusion
Faire des triangles et des flèches en CSS n’est pas bien compliqué. Avoir un mixin (pour les utilisateurs de sass) peut grandement faciliter et accélérer les choses. Et vous pouvez aussi mixer les astuces et ajouter des transitions CSS sur vos triangles pour ajouter un peu de dynamisme à votre page.
N’hésitez pas à me faire part de vos remarques et peut être de vos solutions pour gérer les triangles en CSS
