CSS Triangle Generator — Free Tool

What Is the CSS Triangle Trick?

CSS triangles use a clever border technique — when an element has zero width and height, its borders form triangles that meet at the center. By making three borders transparent and one colored, you get a clean triangle without any images or SVG. This technique has been a CSS staple for over a decade and remains the simplest way to add arrows and pointers to tooltips, dropdowns, and navigation.

How It Works

Set width: 0; height: 0; on the element. Then apply borders: the colored border determines the triangle's base, and the transparent side borders control its width. The triangle points opposite to the colored border — a colored bottom border creates an upward-pointing triangle.

How to Use This CSS Triangle Generator

Choose the triangle direction — Select which direction the triangle points — up, down, left, right, or diagonal.
Set the size — Adjust the width and height of the triangle independently to control its proportions.
Pick a color — Choose the fill color for the triangle.
Copy the CSS — Grab the CSS border-trick code that creates the triangle using transparent borders.

Tips and Best Practices

→ The triangle trick uses borders. CSS triangles work by setting an element's width and height to 0, then using colored and transparent borders. The colored border forms the visible triangle.
→ Use triangles for dropdown arrows. Small CSS triangles make perfect arrow indicators for dropdown menus, accordion toggles, and expand/collapse buttons.
→ Consider clip-path for complex shapes. The border trick only creates right triangles and isosceles triangles. For equilateral, scalene, or irregular triangles, use clip-path: polygon() instead.
→ Use as tooltip arrows. CSS triangles are commonly used as the arrow/caret on tooltip callouts and speech bubble components.

Frequently Asked Questions

How do CSS triangles work?

Set width and height to 0, make three borders transparent, and give one border a solid color. The visible border forms a triangle. The direction is opposite to the colored border — a colored bottom border makes an upward triangle.

What sizes can CSS triangles be?

Any size. Width is controlled by left/right border widths, height by top/bottom border width. For equilateral triangles, set side borders to half the height border width.

When should I use CSS triangles vs SVG?

CSS triangles are ideal for small UI elements — dropdown arrows, tooltip pointers, breadcrumb separators. For larger shapes, complex polygons, or animations, SVG provides more flexibility.

How does the CSS triangle trick work?+

When an element has zero width and height, its borders meet at a point. By making three borders transparent and one colored, the remaining visible border forms a triangle shape. The triangle's direction is opposite to the colored border — a colored bottom-border points upward.

Can I create equilateral triangles with CSS?+

The border trick creates isosceles triangles by default. For equilateral triangles, set the left and right border widths to half the base width, and the bottom border to the base × (√3/2). Alternatively, use clip-path: polygon(50% 0%, 0% 100%, 100% 100%) for a clean equilateral triangle.

Is clip-path better than the border trick for triangles?+

For simple triangles, the border trick has better browser support and is well-understood. Clip-path is more flexible — it supports any polygon shape, is more readable in code, and can be animated. For modern browsers, clip-path is generally the better choice.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools