Comment utiliser : CSS Triangle Generator
- Click a direction — up, down, left, right or one of the corners.
- Set the width, height and color.
- Choose Borders (works everywhere, ideal for
::before/::afterarrows) or clip-path (easier to read, supports gradients). - Copy the CSS onto an element or pseudo-element.
Two ways to draw a triangle
The border trick: an element with zero width and height shows only its borders, and each border is a triangle meeting in the middle. Make three of them transparent and the fourth colored, and you get an arrow — no images needed. Its size comes from the border widths.
clip-path: a normal box with clip-path: polygon(50% 0, 100% 100%, 0 100%). Easier to read and size, and it can be filled with a gradient or image.
Tooltip arrow example
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}More shapes: Clip-path Generator, Border Radius Generator, SVG Blob Generator.
Aussi recherché comme : css triangle, css arrow, tooltip arrow css, border triangle css, css caret, triangle shape css, speech bubble arrow css.
Outils complémentaires : CSS Triangle Generator
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- CSS Grid Generator — Set the columns, rows and gap, then drag across cells to make areas like header, sidebar and main.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Questions fréquentes
How do I make a triangle in CSS?
Give an element width: 0 and height: 0, then set borders: for an up arrow, transparent left and right borders and a colored bottom border. This generator writes it for any direction and size.
How do I add an arrow to a tooltip?
Add a ::after pseudo-element with content: "", position it at the tooltip’s edge, and give it the triangle borders from the generator.
Border triangle or clip-path?
Borders work in every browser and are standard for tiny arrows on pseudo-elements; clip-path is easier to size and supports gradients.
Can a CSS triangle have a border or shadow?
Stack two triangles (one slightly larger in the border color), or use clip-path on a wrapper with filter: drop-shadow() for a shadow.
Puis-je installer CSS Triangle Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS Triangle Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.