Skip to content
ToolQivo

CSS Triangle Generator

Generate the border trick that makes triangles and tooltip arrows.

Developer Tools Reviews Free · no sign-up

Preview

Quick Tool Overview

The CSS Triangle Generator writes the border trick in any direction and size, alongside the modern clip-path equivalent and a complete tooltip arrow — which is what most people actually want a triangle for.

What it does
Generates CSS triangles and tooltip arrows
You give it
A direction, a size and a colour
You get back
The border trick, the clip-path version and a tooltip snippet
Best for
Tooltips, dropdown arrows and speech bubbles
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the CSS Triangle Generator

A CSS triangle is a zero-sized box with thick borders, where three of the four are transparent. Borders meet at a diagonal, so the one visible border becomes a triangle. It is a trick, it is everywhere, and it is fiddly to write from memory.

Pick a direction and a size and the declaration is generated, with the preview showing the real result. The modern alternative is generated alongside: clip-path with a polygon, which takes a real width and height rather than inverted border widths and can be animated. There is also a complete tooltip arrow snippet using a pseudo-element, since that is what most people actually want the triangle for.

Key features of the CSS Triangle Generator

Both methods generated

The border trick for maximum compatibility and the clip-path polygon, which reads as what it is and can be animated.

Independent width and height

The triangle need not be equilateral, which is what a wide flat arrow requires.

Eight directions

The four sides and the four diagonals, each with the correct border combination worked out.

A complete tooltip arrow

A pseudo-element already positioned against its parent, with the offsets calculated.

Explains the trick

Why a zero-sized box with thick borders produces four triangles, so the CSS stops looking arbitrary.

How to use the CSS Triangle Generator

  1. 1

    Pick a direction

    Up, down, left, right or one of the four diagonals.

  2. 2

    Set the size and colour

    Width and height are independent, so the triangle need not be equilateral.

  3. 3

    Compare the two methods

    The border trick and the clip-path equivalent are both generated.

  4. 4

    Take the tooltip snippet

    A complete pseudo-element arrow, positioned and ready.

Frequently asked questions

Borders meet at a 45-degree diagonal where they join. On a zero-sized box with thick borders, each border is a triangle — so making three of them transparent leaves one visible.

Reviews of the CSS Triangle Generator

What people who use the CSS Triangle Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the CSS Triangle Generator. It takes half a minute and no account.

Write the first review

More developer tools