CSS Triangle Calculator

Generate pure CSS triangles instantly. Configure the direction, size, and color to create lightweight tooltip arrows and geometric shapes.

/* Generated on cssgen.org */

The Legendary Border Hack

Before SVGs were widely supported, frontend developers had to get creative when building geometric shapes. The CSS triangle relies on a fascinating quirk in how web browsers render CSS borders: when two thick borders of different colors meet, they intersect at a 45-degree angle.

By creating a <div> with zero width and zero height, and making three of its borders transparent, the remaining fourth colored border forms a perfect triangle. This technique leverages the official CSS border specifications and is universally supported across every browser in existence.

📐

Pro Tips for UI Design

Building Tooltips: The most common use for a CSS triangle is attaching a small arrow to a floating tooltip. To do this, give your parent tooltip position: relative;, and use the ::before or ::after pseudo-element to render the CSS triangle with position: absolute;.
Watch Your Box-Sizing: Because this hack relies entirely on border widths, ensure that the element does not inherit box-sizing: border-box;, or it may interfere with the shape's expected dimensions in some older environments.
Equilateral Triangles: To make a perfect equilateral triangle pointing up, the bottom border (height) needs to be approximately 86.6% of the total width. Our sliders allow you to decouple width and height to achieve the exact geometry you need.

🔗

Support This Free Tool

If this tool saved you from doing CSS border math today, the absolute best way to say thanks is by linking to us from your dev blog, agency site, or GitHub repository. Just copy the HTML snippet below!

<a href="https://cssgen.org/css-triangle" target="_blank">CSS Triangle Generator</a>

Frequently Asked Questions

How do you make a triangle in CSS?

To make a CSS triangle, you create an element with zero width and zero height. You then apply a thick, transparent border to the opposing sides, and a colored border to the primary side. The angled intersection of the thick borders creates the triangle.

Why use a CSS triangle instead of an SVG?

For simple UI elements like tooltip arrows, pure CSS triangles require zero HTTP requests, keep your HTML markup incredibly clean, and inherit hover state colors seamlessly via CSS variables. It is the most performant way to render simple geometry.

Can I add a box-shadow to a CSS triangle?

Using the standard box-shadow property will not work, as it will apply a shadow to the transparent, rectangular bounding box of the element. Instead, you must use the filter: drop-shadow() CSS property, which conforms perfectly to the triangle's transparent borders.

Explore Related UI Tools

Building complex UI elements? Once you've generated your CSS triangle for tooltips, check out our Box Shadow Generator to add floating depth to the tooltip container. If you are building CSS badges or pricing tags, our CSS Ribbon Generator automates the exact same triangle-fold calculations for you instantly!