What's the difference between the two methods?

The border trick uses transparent borders and works everywhere; clip-path is more flexible and keeps a real element box.

Can I point the triangle in any direction?

Up, down, left, and right are supported directly.

Can I change the color?

Yes, pick any color with the color picker.

CSS Triangle Generator

Generate arrow and triangle shapes with borders or clip-path.

Works Offline

Privacy First

No Login

No API

Options

Method

Direction

Size: 50px

Color

Preview

CSS output

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

About the CSS Triangle Generator

Create CSS triangles and arrows pointing up, down, left, or right using either the classic border trick or a modern clip-path polygon. Adjust size and color and copy the ready-to-use CSS.

Examples

Up arrow

border trick, up, 50px

Output

.triangle { border-bottom: 50px solid #6366f1; }

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser