Catégorie: Développement
Générateur de triangle CSS
Créez un triangle en CSS pur avec l'astuce des bordures
Choisissez une direction, une taille et une couleur pour créer une boîte de taille nulle dont les bordures colorées forment un triangle, avec un aperçu en direct et la déclaration CSS prête à copier. Tout est calculé dans votre navigateur.
width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 80px solid #0f7b63; border-left: 80px solid transparent;
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
Un triangle CSS est une boîte `width: 0; height: 0;` dont une bordure reçoit une couleur pendant que les deux bordures adjacentes restent transparentes, de sorte que seul le triangle de la bordure colorée apparaît. C'est facile à inverser à la main, la mauvaise paire de côtés, ou une bordure laissée opaque au lieu de transparente, donc cet outil construit les quatre déclarations à partir d'une direction, d'une taille et d'une couleur et montre le résultat sur une vraie boîte au fil de vos changements.
Mode d'emploi
- Choisissez une direction : haut, bas, gauche ou droite.
- Définissez la taille et la couleur.
- Copiez les déclarations de bordure dans votre feuille de style.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Quelque chose est-il envoyé à un serveur ?
- Non. L'aperçu est une vraie bordure CSS affichée par votre navigateur, et la déclaration est du texte assemblé dans la page.
- Pourquoi le triangle a-t-il besoin d'une largeur et d'une hauteur nulles ?
- L'astuce des bordures repose sur des bordures qui se rejoignent en un point plutôt que d'encadrer une boîte. Une largeur ou une hauteur non nulle aplatirait le triangle en trapèze.
- Puis-je m'en servir pour une flèche de bulle d'info-bulle ?
- Oui, c'est l'usage le plus courant. Positionnez le triangle en absolu contre le bord de l'info-bulle et faites correspondre sa couleur à l'arrière-plan de celle-ci.