« Le CSS n’est pas fait pour faire des formes complexes » 📐
C’est vrai mais on peut quand même essayer non ?
Je vais te montrer comment créer un triangle, le tout en utilisant un seul élément.
C’est facile et il te faut uniquement 5 propriétés CSS. 🤨
Vraiment l’astuce est très simple.
Il suffit de jouer avec la taille des bordures. Le tout sur un élément ayant une longueur et une largeur de 0px.
Avec une taille nulle, les bordures partent du centre de l’élément.
Par conséquent, chaque bordure va s’agrandir en partant de la taille de l’élément (0px) pour arriver à la taille de bordure définie.
Pour finir il suffit de jouer sur la taille des bordures pour déformer le triangle et permettre de créer des triangles équilatéraux, rectangles, etc.
Vous n’avez plus d’excuses pour ne pas créer l’apparence de vos tooltips uniquement en CSS 😉
Si tu aimes ce genre de contenu j’ai lancé une newsletter mensuelle qui devrait te plaire, le lien est juste en dessous 👇
Commentaires