CSS Triangle Generator

Why a triangle is just a clever border

HTML elements are rectangles, yet you constantly see triangular shapes: dropdown carets, tooltip pointers, breadcrumb arrows. The classic trick exploits how browsers draw borders. When an element has zero width and height but thick borders, the four border edges meet at the center as diagonal seams — each side becomes a triangle that fans out from the middle. Make three of those borders transparent and color only the fourth, and the single visible triangle is your shape. This generator builds exactly that CSS and shows a live preview as you adjust it.

For an upward-pointing triangle, the recipe is left and right borders transparent and the bottom border colored:

The half-width left/right borders set the base, and the bottom border sets the height. Diagonal triangles (a corner wedge for a ribbon or notch) use just two borders instead of three.

How width and height map to the output

The two sliders feed the border math directly. For up/down arrows the colored border equals your height while each transparent side border is half the width, so a 60×60 triangle gets 30px side borders and a 60px colored border. For left/right arrows the roles swap. Pick a direction from the nine-button grid, and the generator regenerates both the border CSS and a modern clip-path equivalent on the fly.

Border trick vs. clip-path: which to use

This tool gives you both, because they suit different jobs:

• Border trick — works in every browser ever shipped, needs no fixed dimensions, and is the bulletproof choice for tooltip and dropdown arrows. Its downside: the element has zero content box, so you can't put text or a background image inside the triangle, and it only makes straight-edged isosceles or right triangles.
• clip-path — defines the shape with a polygon() of percentage points, for example polygon(50% 0%, 0% 100%, 100% 100%) for an upward triangle. The element keeps real width and height, so you can layer gradients, images, or even text behind the clip, and the points can describe any polygon. The catch is that you must give it explicit dimensions, and very old browsers ignore it.

A good rule: reach for the border trick for tiny UI pointers, and clip-path when the triangle needs to hold content or be an arbitrary shape.

The bonus CSS arrow

The third output is a chevron arrow — the thin ">" shape used for "next" buttons and accordion toggles. It is built differently from the filled triangle: a small square element shows only its right and bottom borders and is then rotated with transform: rotate(). Rotating that L-shaped corner by 45°, 135°, 225°, or 315° points it in any of the four diagonal directions, giving you a crisp outline arrow that scales with border thickness rather than a solid wedge.

Practical tips and pitfalls

• Position a tooltip pointer with the element's own borders. Place the triangle as a ::before or ::after pseudo-element and nudge it with negative margins so it overlaps the bubble's edge seamlessly.
• Match the color to the parent. A tooltip arrow only looks attached if its colored border is the exact same value as the bubble's background — copy the hex from one place to both.
• Don't set a border on a triangle you also gave width. The border trick relies on width and height being 0; add real dimensions and the borders draw as a frame, not a triangle. Use the clip-path version instead when you need size.
• Anti-aliasing on rotated chevrons. At small sizes a rotated chevron can look slightly soft; bump the border thickness up a pixel for a cleaner edge on high-density screens.

All CSS is generated in your browser as you type, and the copy buttons place each snippet on your clipboard — nothing is uploaded.