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.

Generador de triángulos CSS

Genera triángulos puramente en CSS usando el truco de los bordes. Elige dirección, tamaño y color, y copia el CSS al instante.

Dirección

Ancho: 120px

Alto: 120px

Color

Vista previa

Código CSS

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

Los triángulos CSS usan el truco de los bordes: un elemento de tamaño cero con bordes transparentes en tres lados y un color sólido en el cuarto produce un triángulo. No se necesitan SVG ni imágenes.

Cómo usar

Genera triángulos puramente en CSS usando el truco de los bordes. Elige dirección, tamaño y color, y copia el CSS al instante.

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.

Características

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

Preguntas frecuentes

Más información

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