How to Make CSS Triangles With a Generator (Step by Step)

July 6, 2026

To make a CSS triangle, open the CSS Triangle Generator, choose the direction it should point, set a size and color, then copy the border-based CSS it writes — no images, no SVG and no manual math. The tool renders the triangle live and figures out exactly which borders to color and which to leave transparent, so you skip the fiddly part of the classic border trick.

Here is how to build one from scratch and understand what the generated code is doing.

How the border trick works

A CSS triangle is really a box with zero width and height and thick borders. When a box has no size, its four borders meet at diagonal seams in the center. If you color only one border and make the two adjacent ones transparent, the colored border collapses into a single triangular wedge pointing away from the transparent sides. That is the whole trick — and the generator handles the mapping for you.

Step-by-step walkthrough

Pick a direction. Choose which way the triangle should point — up, down, left, right or a diagonal. This determines which border gets the color.
Set the size. Adjust the border width to make the triangle larger or smaller. Larger widths produce a bigger triangle.
Choose a fill color. Set the color of the visible border; it becomes the triangle's fill.
Check the live preview. The tool renders the triangle instantly so you can confirm the direction and proportions.
Copy the CSS. Paste the generated rule onto an element or a pseudo-element like ::after to attach the triangle to another component.

What the generated code looks like

A triangle pointing up comes out roughly like this — a colored bottom border with transparent sides on a zero-size box:

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #3b82f6;
}

Points	Colored border	Transparent borders
Up	bottom	left, right
Down	top	left, right
Left	right	top, bottom
Right	left	top, bottom

Private, offline and free

Everything is generated locally in your browser. Nothing is uploaded, there is no sign-up, and the tool works offline as a PWA. The generator supports eight directions including diagonals, so you can produce carets, arrows and tooltip tips without ever leaving the page.

Try the CSS Triangle Generator — free and 100% in your browser.

FAQ

Do I need an image or SVG for a CSS triangle?

No. The border trick produces a real triangle from a single empty element, so there is nothing to download and no extra HTTP request. This keeps arrows and carets lightweight and instantly recolorable with a CSS variable.

How do I attach the triangle to a tooltip or bubble?

Apply the triangle CSS to a ::after pseudo-element on the bubble and position it absolutely against the edge you want the arrow on. Match the border color to the bubble's background so it reads as one shape.

Can I make a diagonal triangle?

Yes. The generator includes diagonal directions, which color two adjacent borders differently. It writes the exact values, which is where the border trick gets tricky to do by hand.

How do I change just the triangle's color later?

Edit the colored border's value, or set it to a CSS variable so a single change updates every triangle. Since the fill is just a border color, recoloring is instant.

Related free tools

CSS Tooltip Generator — builds the whole tooltip including its arrow.
CSS Clip Path Generator — for fully custom shapes.
CSS Border Radius Generator — round corners on your components.
CSS Box Shadow Generator — add depth to bubbles and cards.

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio building web apps, SaaS and custom software. If you need more than snippets, explore what ByteVancer can build for your product.

Guide