Softonic

CSS Triangle Generator

Step 1 / 2
Next

The classic CSS triangle is not a triangle at all, it is a zero-width, zero-height element with three transparent borders and one colored border that happens to meet at a point. This generator outputs that declaration for you in four directions (up, down, left, right), sized to the pixel value you choose and filled with the color you pick. Great for tooltip arrows, speech bubbles and breadcrumb separators.

How to build a border-triangle

  1. 1

    Pick a direction

    Up, down, left or right. The direction determines which border gets the color and which three stay transparent.

  2. 2

    Set the size

    The size value is used for all border widths. A 60px triangle will be 120px wide (or tall, depending on direction).

  3. 3

    Choose a fill color

    The color input only accepts hex values (for example `#10b981`); rgb, rgba and named colors are not supported. The color is applied only to the opposite-side border.

  4. 4

    Copy the CSS rule

    The output is a complete `.triangle { ... }` ruleset: drop it into your stylesheet and add `<div class="triangle"></div>` where needed.

Why the border trick works

When a box has width: 0 and height: 0, its four borders meet at a single center point. Because borders miter at 45 degrees, each border is already a triangle, three of them just happen to be invisible. Make one border colored and you see that one triangle.

Direction map

Direction Visible border Transparent borders
Up border-bottom border-left, border-right, border-top
Down border-top border-left, border-right, border-bottom
Left border-right border-top, border-bottom, border-left
Right border-left border-top, border-bottom, border-right

Sizing math

All three transparent borders share the size value. The visible border uses the same size. So a triangle with size: 60:

  • Width = 2 × 60 = 120px for up/down triangles
  • Height = 2 × 60 = 120px for left/right triangles

If you need an asymmetric triangle (narrower base, taller point), give the transparent borders one size and the visible border a different size, for example border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; gives a tall, narrow up-triangle.

When to reach for SVG instead

  • You need multiple points, not three, use <polygon>.
  • The triangle must scale fluidly with the parent, use a viewBox and preserveAspectRatio.
  • You want a gradient fill, a stroke, or a rounded tip, CSS borders cannot do any of those.

Frequently Asked Questions

Not with borders alone, border widths do not accept % or vw in any well-supported way. If you need fluid scaling, switch to an SVG <polygon> or use clip-path: polygon(...) on a normal element.

You cannot round the corner where the borders meet. Use an SVG with a stroked path and stroke-linejoin: round, or clip-path: polygon(...) combined with a slight filter: drop-shadow to mask the edge.

Yes, that is the most common use case. Position the triangle absolutely against the tooltip edge and match the fill color to the tooltip background so it reads as a single bubble.

Yes. The direction, size and color you choose are sent to our server with the page request so it can build the CSS. In the step-by-step flow they are also carried in the page link. They are not stored.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

Tool available in other languages