Générateur de triangles CSS

Générez des triangles CSS avec l'astuce classique des bordures. Définissez la direction, la taille et la couleur, puis copiez l'extrait.

CSS Triangle Generator

Live

Direction

Size60px

Color

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Key capabilities

Générez des triangles CSS avec des astuces de bordure : direction, taille et couleur.
S'exécute dans votre navigateur
Utilisation gratuite

Mode d'emploi

Choisissez la direction du triangle.
Définir la taille et la couleur de remplissage.
Copiez le CSS.

How this tool works

Choisissez la direction du triangle.
Définir la taille et la couleur de remplissage.
Copiez le CSS.

Recommended settings

Utilisez d'abord les options par défaut, puis ajustez si nécessaire

Supported formats

Text / on-page input

File size and limits

Les aperçus multicouches très complexes peuvent sembler plus lents sur les téléphones plus anciens.

Privacy

Les générateurs de couleurs et CSS fonctionnent entièrement dans votre navigateur. Les aperçus et les conversions ne téléchargent jamais vos styles.

Common use cases

Utilisez CSS Triangle Generator chaque fois que vous en avez besoin : générez des triangles CSS avec des astuces de bordure : direction, taille et couleur.

Troubleshooting

L'aperçu est différent après le collage

Vérifiez les CSS concurrents sur votre page (réinitialisations, couleurs héritées). Copiez d'abord la règle générée dans une feuille de style isolée.

FAQ

Est-ce que cela télécharge mon CSS ?

Non. Les générateurs et les convertisseurs s'exécutent dans votre navigateur avec un aperçu en direct.

Ai-je besoin d'un compte ?

Non. Ouvrez l'outil, modifiez les contrôles et copiez le CSS.