BYTETOOLS

CSS Triangle Generator

Generate pure-CSS triangles using the classic border trick. Choose direction, size and color, preview live, and copy the ready-to-use triangle CSS.

Triangle settings

60

CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 60px solid #6d28d9;
}

What is the CSS Triangle Generator?

The CSS Triangle Generator produces triangles with the classic zero-width, transparent-border trick — no images or SVG needed.

  • Eight directions including diagonals
  • Size and color controls
  • Pure CSS — no images or SVG
  • Live triangle preview
  • Copy-ready border-trick CSS
  • Fully client-side and free

How to use the CSS Triangle Generator

  1. 1

    Choose the direction the triangle should point.

  2. 2

    Set the size and pick a fill color.

  3. 3

    Check the live preview of the triangle.

  4. 4

    Copy the generated border-based CSS into your project.

About the CSS Triangle Generator

The CSS Triangle Generator produces triangles with the classic zero-width, transparent-border trick — no images or SVG needed. Pick a direction, size and color, and the tool renders the triangle live and writes the exact border values that create it.

Triangles like these power tooltip arrows, dropdown carets, ribbons and speech bubbles. Instead of puzzling over which borders to make transparent, you choose a direction and copy clean CSS.

Everything is generated locally in your browser — free, private, and offline-capable.

Frequently asked questions

How do you make a triangle in CSS?

Give an element zero width and height, then set thick borders where only one side has a color and the adjacent sides are transparent. The colored border collapses into a triangle pointing away from the transparent sides.

Why does the CSS border trick create a triangle?

When a box has no width or height, its four borders meet at diagonal seams in the center. Making three borders transparent and one colored leaves a single triangular wedge — the visible border.

How do I change the direction a CSS triangle points?

Move the colored border to the opposite side of the direction you want it to point. A triangle pointing up has a colored bottom border with transparent left and right borders; this tool handles the mapping for you.

Can I use a CSS triangle for a tooltip arrow?

Yes — border-trick triangles are the standard way to add arrows to tooltips and speech bubbles. Position the triangle absolutely against the bubble edge. Our CSS Tooltip Generator builds the whole tooltip including the arrow.

Are CSS triangles responsive?

They are sized in pixels via border widths, so they do not scale automatically, but you can adjust the sizes with media queries or use SVG for fully fluid shapes. For fixed-size arrows and carets, the border trick is perfect.

Guides for CSS Triangle Generator

Related tools