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.

CSS-Dreieck-Generator

Erzeuge reine CSS-Dreiecke mit dem Border-Trick. Wähle Richtung, Größe und Farbe – kopiere das CSS sofort.

Richtung

Breite: 120px

Höhe: 120px

Farbe

Vorschau

CSS-Code

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

CSS-Dreiecke nutzen den Border-Trick: Ein Element mit Größe Null, drei transparenten Rändern und einer Vollfarbe auf der vierten Seite ergibt ein Dreieck. Keine SVGs oder Bilder erforderlich.

Anleitung

Erzeuge reine CSS-Dreiecke mit dem Border-Trick. Wähle Richtung, Größe und Farbe – kopiere das CSS sofort.

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.

Funktionen

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

Häufig gestellte Fragen

Mehr erfahren

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