CSS Triangle GeneratorPure CSS & Vector

Generate pixel-perfect CSS border triangles pointing in 8 directions with instantaneous live preview, zero dependencies, and multi-format export.

1. Pointing Direction

top

24×20px

Triangle Geometry Profile

2. Dimensions & Proportions

Unit:px

Quick Sizes:

Base Width

Apex Distance (Height)

3. Color & Opacity

Hex Color

Opacity:100%

#6366f1

Quick Palettes:

Popular Real-World Presets

8 ready shapes

Interactive Canvas(24px × 20px)

Context:

24px × 20px • top • 1x zoom

Generated Code

Class Name:

.css-triangle {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid #6366f1;
}

Need minified code on a single line?

How the CSS Border Triangle Trick Works

1. Zero Element Dimensions

When you set an HTML element's width: 0 and height: 0, there is no internal content box. The entire visual appearance of the element is rendered solely by its outer borders.

2. 45° Miter Joints

In the CSS Box Model, where adjacent borders meet at the corners, the browser calculates a diagonal 45-degree miter intersection seam to transition cleanly between borders.

3. Transparent Side Masking

By coloring one border (e.g. border-bottom: 20px solid #6366f1) while leaving the opposite sides transparent, the diagonal seams clip the colored border into a sharp triangle pointing up!

CSS Border Method vs Modern clip-path Comparison

Feature	CSS Border Trick	clip-path: polygon()
Browser Compatibility	100% (IE6+, All modern browsers)	98% (Modern Chrome, Safari, Firefox)
Gradient Backgrounds	No (solid colors only)	Yes (supports linear & radial gradients)
Box Shadow / Outlines	Requires double pseudo trick	Supports filter: drop-shadow()
Responsive Auto-scaling	Fixed pixel or rem border math	Percentage based (fluid coordinates)
Zero Runtime Overhead	Extremely fast, pure box layout	GPU polygon clip pipeline

Pro Tips: Eliminating Antialiasing Blurriness & Adding Outlines

Fixing Fuzzy / Jagged Edges in WebKit & Firefox:

On high-DPI displays or specific screen resolutions, subpixel border rendering may occasionally show a slight jagged or gray outline on transparent edges.

To force subpixel antialiasing smoothing, add a micro hardware-acceleration transform:

transform: rotate(0.001deg);

Creating a Bordered Triangle (Outline Effect):

Because a border triangle already uses borders to create its body, you cannot simply add border: 1px solid black.

Instead, stack two pseudo-elements: ::before as the larger outer border (outline color) and ::after shifted by 1px in the fill color!

Frequently Asked Questions (FAQ)

What is the formula for an equilateral triangle in CSS?

For an equilateral triangle with base width W, all three sides must be equal. The height H is calculated by the Pythagorean theorem: H = W × (√3 / 2) ≈ W × 0.866025. Our tool automatically computes this when "Equilateral" mode is selected.

How do I create a CSS arrow that animates on hover?

Apply transition: transform 0.2s ease-in-out to your triangle element. On hover (e.g. accordion open), apply transform: rotate(180deg) or transform: translateY(4px).

Why use CSS border triangles over SVG or icon fonts?

CSS border triangles require zero external HTTP requests, zero DOM image payloads, load instantly, and match stylesheet variables seamlessly. For tooltips and dropdowns, they keep your bundle ultra-lightweight.

Does this tool send any code to external servers?

Never. 100% of calculations, color processing, and CSS generation run completely in your client browser under ToolsAA's strict zero-data-retention privacy standard.