CSS Triangle Generator

Create pure CSS triangles using the border technique.
Choose a direction, customize the size and color, then copy the code.

Direction

Width100px

Height100px

Color

CSS Code

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3b82f6;
}

How CSS Triangles Work

CSS triangles are created using the border property trick. By setting the width and height to 0 and using transparent borders on adjacent sides, the visible border forms a triangle shape. This technique works in all browsers and requires no images.

Extract shapes from any website

Frontend Hero's CSS Scanner lets you inspect and copy any CSS from any website in 2 clicks. See how top designers create their shapes and layouts.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →