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 Triangle Generator

Generate pure-CSS triangles using the border trick. Pick a direction, size, and color — copy the CSS instantly.

Direction

Width: 120px

Height: 120px

Color

Preview

CSS Code

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

CSS triangles use the border trick: a zero-size element with transparent borders on three sides and a solid color on the fourth produces a triangle. No SVG or images required.

How to Use

Generate pure-CSS triangles using the border trick. Pick a direction, size, and color — copy the CSS instantly.

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.

Key Features

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

Frequently Asked Questions

Learn More

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