Générateur de Triangles CSS
Générez des triangles CSS avec l'astuce de la bordure.
Choisissez la direction, la taille et la couleur — copiez le code instantanément.
About
The CSS Triangle Generator creates CSS triangles using the classic border trick — no images needed. It supports all 8 directions (up, down, left, right, and 4 diagonals).
Perfect for speech bubbles, dropdown arrows, navigation chevrons, and any UI decoration. The generated code can be pasted directly into your project. All processing is done locally in your browser.
How to Use
Choose Direction
Select from the 3×3 grid which direction your triangle should point. All 8 positions are supported.
Adjust Parameters
Use the width, height sliders and the color picker to customize your triangle. The preview updates in real time.
Copy Code
Click "Copy CSS" or "Copy HTML" to copy the generated code to your clipboard and paste it into your project.
Glossary
- Border Trick
- A CSS technique for creating triangles by setting width and height to 0, then applying colored and transparent borders.
- transparent
- A CSS color value meaning fully transparent. Used to hide the unwanted sides of the border to form a triangle shape.
- clip-path
- A CSS property that clips an element to a shape. An alternative to the border trick, supports more complex shapes but requires modern browsers.
- Speech Bubble
- A balloon-shaped UI element used in chat interfaces. A triangle forms the "tail" pointing to the speaker.
- Pseudo-element (::before/::after)
- CSS virtual elements used to attach the triangle to a box without adding extra HTML markup.
FAQ
- Q.Astuce de bordure ou chemin de clip : lequel dois-je utiliser ?
- L'astuce de la bordure fonctionne dans les anciens navigateurs. clip-path prend en charge des formes plus complexes mais peut ne pas fonctionner dans tous les anciens navigateurs. L’un ou l’autre convient aux projets modernes.
- Q.Puis-je faire un triangle équilatéral ?
- Vous pouvez vous en rapprocher en ajustant le rapport largeur/hauteur. Pour un triangle ascendant, définissez la largeur ≈ hauteur × 2 comme point de départ.
- Q.Des données sont-elles envoyées à un navigateur ?
- Non. Tout est généré localement dans votre navigateur. Aucune donnée n'est transmise.
- Q.Puis-je créer un triangle réactif ?
- Remplacez manuellement les valeurs px générées par des unités em, rem ou vw pour que l'échelle du triangle soit réactive.
- Q.Peut-il générer du CSS pour une bulle entière ?
- Cet outil se concentre uniquement sur la génération du CSS pour la partie triangulaire. Une bulle entière est généralement implémentée en combinant le triangle avec des pseudo-éléments ::before/::after.
Cas d'utilisation
Chat Speech Bubbles
Add a triangle 'tail' to message balloons in chat or notification UIs.
Accordion & Dropdown Arrows
Use up/down triangles to indicate open/close states for menus and accordions.
Custom Select Arrows
Replace default select box arrows with styled CSS triangles.
Carousel Navigation
Create left/right arrow buttons for image sliders and carousels without using icon fonts.