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 三角形生成器

利用 border 技巧生成纯 CSS 三角形。选择方向、尺寸和颜色，立即复制 CSS 代码。

方向

宽度: 120px

高度: 120px

颜色

预览

CSS 代码

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

CSS 三角形使用 border 技巧：将一个零尺寸元素的三条边设为透明边框，第四条边设为实色，即可形成三角形。无需 SVG 或图片。

使用方法

利用 border 技巧生成纯 CSS 三角形。选择方向、尺寸和颜色，立即复制 CSS 代码。

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.

主要功能

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

常见问题

了解更多

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