Générateur de Triangles CSS
Créez des triangles CSS purs avec la technique du border hack. Choisissez la direction, la taille et la couleur avec aperçu et CSS prêt à copier.
CSS Triangle Generator
Create pure CSS triangles using the border hack.
Comment utiliser le Générateur de Triangles CSS
- Choisissez la direction du triangle : haut, bas, gauche ou droite.
- Ajustez les curseurs de largeur et hauteur pour dimensionner le triangle.
- Choisissez une couleur avec le sélecteur de couleur.
- Copiez le CSS généré et collez-le dans votre feuille de style.
À propos des Triangles CSS
Les triangles CSS sont créés avec une astuce : définir la largeur et la hauteur à zéro avec des bordures épaisses transparentes, puis colorer une bordure pour créer une forme triangulaire.
Cette technique est utilisée pour les flèches d'info-bulles, les indicateurs de menu déroulant et les éléments décoratifs — sans images ni SVGs.
Questions fréquentes
Comment fonctionne l'astuce du triangle CSS ? ▼
Avec largeur et hauteur à 0 et des bordures épaisses, les bordures forment quatre triangles. Trois bordures transparentes révèlent un triangle visible.
Puis-je créer différentes formes ? ▼
Ce générateur crée des triangles. Pour d'autres formes, utilisez border-radius ou clip-path.
Cela fonctionne-t-il dans tous les navigateurs ? ▼
Oui. La technique des bordures est l'une des plus anciennes et des mieux supportées en CSS.
Outils connexes
Générateur de Dégradés CSS
Créez de beaux dégradés CSS visuellement. Choisissez le type linéaire, radial ou conique, ajoutez des arrêts de couleur, ajustez l'angle et obtenez un aperçu en direct. Copiez le CSS en un clic.
Générateur d'Ombres CSS
Concevez des ombres CSS visuellement avec aperçu en direct. Ajustez le décalage, le flou, l'étalement et la couleur, puis copiez le CSS prêt à l'emploi instantanément.
Générateur de Glassmorphisme
Générez des effets CSS de glassmorphisme avec contrôles de flou et de transparence. Aperçu en direct et CSS prêt à copier pour des designs de verre dépoli.