CSS Triangle Generator

Generate CSS triangles with the border trick.

Direction: UPSize: 50pxColor: #00f2feMethod: CSS Border Trick

Quick Presets

Direction

Size (50px)

Triangle Color

Live Preview

CSS Output

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #00f2fe;
}

The CSS border triangle trick

A zero-width, zero-height element shows only its borders, and each border meets its neighbors on a diagonal. By making three borders transparent and giving the fourth a color, you get a crisp, scalable triangle with no images or SVG. The pointing direction is set by which border carries the color. Copy the generated CSS straight into tooltips, dropdown arrows, and carets.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Producing a tooltip or a speech-bubble arrow without an image.
Getting the border values for a triangle pointing a specific way.
Making a small caret for a dropdown indicator.
Producing a triangle that inherits a colour from a variable.
Comparing the border trick against a clip-path alternative.

Frequently Asked Questions

How does a border become a triangle?: Because adjacent borders meet on a 45° diagonal rather than overlapping. On an element with zero width and height, the four borders are four triangles meeting at a point — make three transparent and colour the fourth, and only that triangle is visible.
Which border points the triangle upward?: The BOTTOM one. The colour goes on the border opposite the direction you want, because a bottom border's visible triangle has its apex at the top. This inversion is the single most common mistake with the technique, and the generator's direction buttons exist to hide it.
How do the size controls map to the shape?: The left and right border widths set the base's half-width and the coloured border's width sets the height. Making them equal gives a triangle whose base is twice its height; a taller, narrower caret means a larger coloured border than transparent ones.
Why use this instead of clip-path or an SVG?: Universal support and zero cost — it works in every browser ever shipped, needs no extra element or request, and animates cheaply. `clip-path: polygon()` is more readable and handles arbitrary shapes, so it is the better choice when you need anything other than a plain triangle.
My triangle has a fuzzy or stepped edge — why?: Because the diagonal is antialiased against whatever is behind it, and a fractional size or a transform makes that worse. Use whole-pixel sizes, and if the triangle sits on a coloured panel, give the transparent borders that panel's colour instead of `transparent` so the blend has nothing to reveal.

Common errors and gotchas

Getting the transparent borders wrong, which produces a trapezoid rather than a triangle.
Forgetting the element needs zero width and height for the trick to work.
Using it where a clip-path or an SVG would be clearer and easier to change.
Assuming the triangle can have a border or a shadow, which the trick cannot provide.
Sizing the triangle in pixels where the surrounding text scales, so it looks wrong at other sizes.