Réaliser des triangles, flèches et formes en en HTML & CSS3

Autrefois, il fallait le faire en image découpé mais maintenant on peut faire en CSS3 : les triangles, flèches et autre formes.

Les height et width seront remis à zéro et du coup le comportement inattendu des bordures peut générer des résultats inattendus.

Nous vous proposons voir quelques exemples.

Les formes

Dans l’exemple on va donner de bordures épaisses colorées à un élément défini dont la taille est de 0px. Voici le résultat obtenu :

triangle

Les flèches et les bulles

Concernant les flèches et les bulles, il existe une technique pour avoir un bon résultat sans pour autant utiliser des images. Pour avoir Un petit exemple, prenons un tooltip réaliser en pur CSS. Voici les codes CSS.

bulle

Les triangles

En rendant les trois côtés transparents, on obtient le triangle sur ce qui reste. Pour cela, il suffit de jouer avec les épaisseurs de bordures pour pouvoir allonger ou aplatir le triangle.

Quelques exemples :

triangle

CSS triangle generator

Si n’avez pas une bonne base en CSS, des outils le feront pour vous.
Nous avons testé l’outil “CSS triangle generator” qui peut générer des flèches ou triangles et peut être personnalisé facilement .

Il suffit de sélectionner la taille, la position, la couleur du triangle;

Vidéo de démonstration

Une réponse à “Réaliser des triangles, flèches et formes en en HTML & CSS3”

  1. khaled

    Merci pour l’astuce très utile

    Répondre

Répondre