Why do width and height have to be 0?

The border trick relies on how browsers join adjacent borders. When a box has width:0 and height:0, all four borders collapse to a single point in the centre and each border becomes a triangular wedge meeting its neighbours along a 45° miter. Give the box any real width or height and those wedges turn back into trapezoids with a flat inner edge — you get a frame, not a triangle. So width:0; height:0 is what forces the four borders to be pure triangles. If you need a box with real dimensions, use the clip-path method instead.

How does the border trick actually make a triangle?

You colour exactly one border and make the rest transparent. The visible wedge points away from the side you coloured: a solid bottom border points up, a solid top border points down, a solid left border points right, a solid right border points left. For a symmetric up/down arrow the two side borders are each half the base width and the coloured border equals the height. For a diagonal (right-angle) triangle you colour one border, make the adjacent one transparent, and zero out the opposite pair.

clip-path vs border — which one should I use?

Use the border method when you need maximum compatibility (it works in literally every browser since IE6) or when the triangle is a tiny decorative arrow — a tooltip tail, a select caret, a CSS-only dropdown indicator. Use clip-path when you want the element to keep a real box size, when you need to fill the triangle with a gradient, background image, or text, or when you want to animate the shape — clip-path transitions smoothly, the border hack does not. clip-path needs a reasonably modern browser (2017+), which is almost everything today.

Can I make a triangle with a gradient or an image inside?

Not with the border method — the element has no real surface, only borders, so background and background-image are invisible. Use the clip-path output instead: it is a normal width×height box, so any background, gradient, or background-image you set is clipped to the triangle. That is the single biggest practical reason to reach for clip-path.

Build a tooltip arrow (the little tail pointing at the trigger)

A tooltip needs a small triangle "tail" that points from the bubble down to the element it describes. Pick the "down" direction, set width to ~16px and height to ~8px, match the colour to your tooltip background, and copy the border CSS. Attach it as a ::after pseudo-element with position:absolute, left:50%, transform:translateX(-50%), top:100%. The tail now sits flush under the bubble and points at the trigger. Because the border method has no box size, it never steals pointer events from the content underneath.

Make a CSS-only dropdown / select caret

Native select arrows are inconsistent across browsers, and custom dropdowns need their own indicator. Pick "down", set a small 10px × 6px triangle in your text colour, and drop it into the trigger button as an inline-block ::after. No icon font, no SVG request, no extra HTTP round-trip — it is part of the stylesheet. Rotate it 180° on the open state with a CSS transition for a caret that flips when the menu expands.

Draw a speech / chat bubble pointer

Chat bubbles need a pointer on one side showing who is speaking. For a left-aligned incoming message, pick the "left" direction so the triangle points back toward the avatar, size it to about 12px × 16px, and match the bubble colour. Position it absolutely on the bubble's left edge, vertically centred. Switch to "right" for the outgoing (sent) side. Two copies of the same generator output, mirrored by direction, give you both sides of a messaging UI.

Add a ribbon / banner corner fold

A "corner ribbon" badge (Sale, New, Featured) often has a small triangular fold underneath where the ribbon wraps around the card corner, giving it depth. Use a diagonal direction like "top-left" to create the right-angle shadow triangle in a darker shade of the ribbon colour, tuck it behind the ribbon with z-index, and the flat sticker suddenly looks like folded fabric. Pure CSS, no image asset to export or maintain.

Fill a triangle with a gradient using the clip-path output

You want a decorative triangle that is not a flat colour — a diagonal section divider filled with your brand gradient, for instance. The border method cannot do this because the element has no surface. Switch to the clip-path output: set the direction and a large size (say 100% width via your own CSS), paste a linear-gradient into the background property the tool generated, and the gradient is clipped to the triangle. This is the move for hero-section diagonal cuts and angled dividers.

CSS Triangle Generator — Border Trick + clip-path

Pure-CSS triangles via the border trick — 8 directions, live preview, copy both border + clip-path CSS — browser-only

Runs locally
Category Color & Design
Best for Moving from a visual idea to reusable color values.

Direction

Width 100px

Height 70px

Color

Preview

Border method

.triangle {
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 70px solid #8b5cf6;
  border-left: 50px solid transparent;
}

Zero-size box + one solid border. Works in every browser back to IE6, but the box has no real width/height so you cannot put a gradient or text inside.

clip-path method

.triangle {
  width: 100px;
  height: 70px;
  background: #8b5cf6;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

A real W×H box clipped to a triangle. Keeps its box size, accepts gradients / images / text, and animates smoothly. Needs a modern browser.

What this tool does

Generate a pure-CSS triangle with zero images, zero SVG, zero dependencies. Pick a direction — up, down, left, right, or any of the four diagonal right-angle corners — set the base width, the height, and a fill colour, and copy the exact CSS. Two outputs are generated side by side: the classic "border trick" (an element with width:0; height:0 and one solid border, which renders in every browser back to IE6) and the modern clip-path: polygon() form (a real W×H box clipped to a triangle, which keeps its box size and accepts gradients, background images, and text inside). The live preview uses the actual border values you are about to copy, so what you see is exactly what ships. Direction, size, and colour round-trip through the URL, so a "share link" lands the recipient on the same triangle, and your last settings are remembered locally. 100% client-side — nothing is uploaded, nothing is tracked.

Tool details

Input: Numbers + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 10 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Color & Design · Designer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Triangle Generator fits into your work

Use it while choosing, checking, converting, or documenting colors for real interface work.

Color jobs

Moving from a visual idea to reusable color values.
Checking contrast and accessibility before a UI ships.
Keeping brand, design, and implementation color decisions aligned.

Color checks

Verify contrast against the actual background, not just a sample swatch.
Check dark and light themes separately when both exist.
Copy the final format your design system or codebase expects.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Build a tooltip arrow (the little tail pointing at the trigger)
A tooltip needs a small triangle "tail" that points from the bubble down to the element it describes. Pick the "down" direction, set width to ~16px and height to ~8px, match the colour to your tooltip background, and copy the border CSS. Attach it as a ::after pseudo-element with position:absolute, left:50%, transform:translateX(-50%), top:100%. The tail now sits flush under the bubble and points at the trigger. Because the border method has no box size, it never steals pointer events from the content underneath.
Make a CSS-only dropdown / select caret
Native select arrows are inconsistent across browsers, and custom dropdowns need their own indicator. Pick "down", set a small 10px × 6px triangle in your text colour, and drop it into the trigger button as an inline-block ::after. No icon font, no SVG request, no extra HTTP round-trip — it is part of the stylesheet. Rotate it 180° on the open state with a CSS transition for a caret that flips when the menu expands.
Draw a speech / chat bubble pointer
Chat bubbles need a pointer on one side showing who is speaking. For a left-aligned incoming message, pick the "left" direction so the triangle points back toward the avatar, size it to about 12px × 16px, and match the bubble colour. Position it absolutely on the bubble's left edge, vertically centred. Switch to "right" for the outgoing (sent) side. Two copies of the same generator output, mirrored by direction, give you both sides of a messaging UI.
Add a ribbon / banner corner fold
A "corner ribbon" badge (Sale, New, Featured) often has a small triangular fold underneath where the ribbon wraps around the card corner, giving it depth. Use a diagonal direction like "top-left" to create the right-angle shadow triangle in a darker shade of the ribbon colour, tuck it behind the ribbon with z-index, and the flat sticker suddenly looks like folded fabric. Pure CSS, no image asset to export or maintain.
Fill a triangle with a gradient using the clip-path output
You want a decorative triangle that is not a flat colour — a diagonal section divider filled with your brand gradient, for instance. The border method cannot do this because the element has no surface. Switch to the clip-path output: set the direction and a large size (say 100% width via your own CSS), paste a linear-gradient into the background property the tool generated, and the gradient is clipped to the triangle. This is the move for hero-section diagonal cuts and angled dividers.

Common pitfalls

Setting a background-color on a border-method triangle and wondering why nothing shows. The element is width:0; height:0 — it has no surface, only borders. Background never renders. If you need a fill (gradient, image, text), use the clip-path output, which is a real box.
Forgetting that the colour goes on the OPPOSITE border from where the triangle points. A triangle that points up is made by a coloured BOTTOM border, not a top one. If your arrow points the wrong way, you almost certainly coloured the wrong side — just flip which border carries the colour.
Leaving the unused borders as solid transparent with a width but expecting a sharp tip. The two transparent side borders must each be half the base width for a symmetric isosceles triangle; if they are unequal the apex shifts off-centre. This tool keeps them balanced for you, but if you hand-edit the CSS, keep left and right side borders equal.

Privacy

Every calculation — the border-value math, the clip-path polygon, the live preview — is plain JavaScript that runs in your browser tab. No triangle config is ever sent to a server, no analytics records what you generated. The one caveat: the shareable URL state encodes your direction, size, and colour in the query string (e.g. ?t={"direction":"up",...}), so if you paste a "share link" into Slack or email, that server's access log will see those values. They are just CSS numbers, so this is harmless — but if you would rather not, copy the CSS manually instead of sharing the URL.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Triangle Generator — Border Trick + clip-path

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Triangle Generator fits into your work

Color jobs

Color checks

Good next steps

Real-world use cases

Build a tooltip arrow (the little tail pointing at the trigger)

Make a CSS-only dropdown / select caret

Draw a speech / chat bubble pointer

Add a ribbon / banner corner fold

Fill a triangle with a gradient using the clip-path output

Common pitfalls

Privacy

FAQ

CSS Clip-Path Generator

CSS Border Radius Generator

CSS Grid Visual Generator

CSS Box Shadow Generator

CSS Gradient Generator

CSS Transform Generator

Color Blindness Simulator

Color Contrast Checker

Color Converter

Color Mixer

Color Shades Generator

CSS Button Generator