How does pure CSS draw a triangle without an image?

It uses the border trick. When an element has zero width and height, its borders meet at diagonal angles in the center. By making three borders transparent and one solid, you get a triangle in the direction of the colored border. It works in every browser and requires no SVG, image, or canvas.

Why use a CSS triangle instead of an SVG?

CSS triangles are great for tiny UI elements: dropdown arrows, tooltip pointers, speech bubble tails, and Aria menu indicators. They render slightly faster than SVG (no extra DOM node, no parsing), scale with em/rem units, and inherit currentColor naturally. For complex shapes or anything beyond a triangle, SVG is the better choice.

Can I make a right triangle (one 90-degree corner)?

Yes. The 'up-left', 'up-right', 'down-left', and 'down-right' directions in this generator produce right triangles by setting only two borders (one transparent, one colored). Useful for ribbon corners, folded-paper effects, and chevron shapes.

Why doesn't the triangle scale when I zoom?

The border trick uses pixel values, which are fixed regardless of font size. To make a triangle scale with text, replace px with em or rem units in the generated CSS — for example, 'border-bottom: 1em solid #6366f1' scales with the parent's font-size. The generator outputs px for predictable visuals; convert manually if you need responsive sizing.

Are there better modern alternatives to the border trick?

Yes — clip-path with polygon() is a more flexible alternative. clip-path lets you draw any polygon shape on a single colored element. The downside is slightly less browser-friendly behavior (older Safari versions had bugs) and it requires a sized element. For triangles specifically, the border trick remains the most concise approach.

Générateur de triangles CSS

Générez des triangles 100 % CSS grâce à l'astuce des bordures. Choisissez la direction, la taille et la couleur — copiez le CSS instantanément.

Direction

Largeur: 120px

Hauteur: 120px

Couleur

Aperçu

Code CSS

.triangle {
  width: 0;
  height: 0;
  border-right: 60px solid transparent;
  border-bottom: 120px solid #6366f1;
  border-left: 60px solid transparent;
}

Les triangles CSS reposent sur l'astuce des bordures : un élément de taille nulle avec des bordures transparentes sur trois côtés et une couleur pleine sur le quatrième forme un triangle. Aucun SVG ni image requis.

Comment utiliser

Générez des triangles 100 % CSS grâce à l'astuce des bordures. Choisissez la direction, la taille et la couleur — copiez le CSS instantanément.

1Pick the triangle direction — up, down, left, right, or a corner direction for right triangles.
2Drag the width and height sliders to set the triangle's size in pixels.
3Choose a color using the color picker or by typing a hex value.
4Watch the live preview update on a checkered background so transparent borders are visible.
5Click 'Copy' to copy the generated CSS class to your clipboard and paste it into your stylesheet.

Fonctionnalités

Eight directions — four cardinal (up/down/left/right) and four corner-anchored right triangles
Live preview on checkered background — confirms which borders are transparent and which are colored
Independent width and height — sliders go up to 400px for both dimensions
Pure-CSS output — no SVG, no images, no JavaScript runtime; just borders on a zero-size element
Color picker plus hex input — choose visually or paste an exact brand color

Questions fréquentes

En savoir plus

Pure-CSS Triangles in 2026 — When the Border Trick Still Wins