CSS Triangle Generator

Pick a direction, size and color to build a triangle out of plain CSS, then copy the code. This uses the classic zero-width/zero-height div with transparent borders technique — no image files, no SVG, no clip-path — just a handful of border declarations that any browser understands.

What Is This Tool?

CSS has no dedicated triangle shape, so triangles are built with a well-known workaround: take an element with zero width and zero height, give it a solid border on one side and transparent borders on the other two adjacent sides. Because adjacent borders meet at a 45-degree angle, the transparent borders taper to a point, leaving only the colored border visible as a triangle.

This tool builds that structure for you: choose which direction the triangle should point, how large it should be, and what color it should be, then watch the live preview update and copy the exact CSS. Same underlying trick used across the web for CSS-only arrows, tooltip pointers and dropdown carets.

Source: CSS Backgrounds and Borders Module Level 3, W3C — defines how adjacent border edges meet at an angle, which is the mechanism this triangle technique relies on.

Why Use It?

Live preview renders the actual triangle so you can confirm size, direction and color before copying anything.
Covers all four basic directions — up, down, left, right — with one control.
No image files or SVG needed — a triangle built this way is just a few lines of CSS.
Useful for tooltip pointers, dropdown/accordion carets, custom bullet points and simple decorative shapes.
Runs entirely in your browser — nothing you configure is uploaded anywhere.
Free, no signup, works on mobile.

How to Use

Pick a direction — the triangle points up, down, left or right depending on which side gets the solid border.
Set the size — this controls the border-width value on all three sides and determines how large the triangle appears.
Pick a color for the visible (solid) border, which becomes the triangle's fill color.
Copy the generated CSS and apply it to an element with width: 0 and height: 0 — an empty <div> or a pseudo-element like ::before/::after both work well.

Example

Input

Direction: down · Size: 60px · Color: #ea580c

Output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

For a downward-pointing triangle, the solid color goes on border-top while the left and right borders stay transparent — the opposite side from the direction the triangle points.

Why zero width and height matters

The trick only works because the element has no content box of its own — width: 0 and height: 0 mean the entire visible shape comes purely from the borders meeting at the center point. If the element has any width or height, the borders no longer taper into a clean point and the shape breaks. This is also why the technique works equally well on an empty <div> or on a ::before/::after pseudo-element with content: "" — no actual content is needed, just the border box.

MDN's documentation on the CSS border property covers how border-width, border-style and border-color combine, including how borders on adjacent sides meet at a diagonal (developer.mozilla.org/en-US/docs/Web/CSS/border) — the geometric fact this whole technique is built on.

Common uses for CSS triangles

Tooltip and speech-bubble pointers: a small triangle (6–10px) positioned at the edge of a rounded box, colored to match the box background.
Dropdown and select carets: a small downward triangle next to a button or select element to indicate it opens a menu.
Accordion/expand indicators: a right-pointing triangle that rotates to point down when a section is expanded.
Custom list bullets: a small right-pointing triangle in place of the default browser bullet, for a more distinctive list style.
Simple banner/ribbon corners: a triangle tucked into the corner of a card to simulate a folded ribbon effect.

Pairing with other CSS tools

Triangles used as tooltip pointers usually need a matching drop shadow to sit visually with the box they're attached to — the Box Shadow Generator produces that shadow. For UI shapes that go beyond triangles (chevrons, stars, hexagons), clip-path is generally the better modern approach rather than stacking more border tricks.

→ Box Shadow Generator · Border Radius Generator

Frequently Asked Questions

Why does the color go on the opposite border from the direction the triangle points?

Picture the element as a diamond made of four triangular border segments meeting in the middle. If the solid color is on the top border, the visible shape occupies the top half — but because the element has zero size, that 'top half' triangle actually points downward, toward where the element's non-existent content box would have been. The same logic applies to all four directions.

Can I make a triangle that isn't a perfect isosceles shape?

Yes — this tool always generates a symmetric triangle for simplicity, but you can hand-edit the copied CSS afterward. Making the two transparent border-widths unequal skews the triangle to one side; changing the solid border's width independently changes its height without affecting its base width.

Does this technique work in all browsers?

Yes — the border-based triangle trick relies only on basic border-width, border-style and border-color support, which has existed since the earliest CSS implementations. It's one of the most broadly compatible pure-CSS shape techniques available.

When should I use clip-path instead of the border trick?

The border trick is ideal for simple triangles specifically, since it needs no extra properties and works everywhere. For anything more complex — pentagons, stars, arrows with a notch, or diagonal cuts on a box that still needs to show a background image — clip-path is more flexible and easier to reason about, though it has narrower legacy browser support.

Can I put text or an icon inside the triangle?

Not directly — since the triangle's element has zero width and height, there's no content box to hold anything. To combine a triangle with text or an icon, use it as a decorative pseudo-element (::before/::after) on a parent element that positions it absolutely, then style the parent's actual content separately.