CSS Triangle Generator

v1.0.2

Generate pure CSS border-trick triangles in eight directions with live preview and copy-ready CSS.

Generates pure CSS border-trick triangles in any of 8 directions (up, down, left, right, and diagonals) with configurable colour and size — no SVG or images needed.

How to use

→Select the direction and set the width, height, and colour.
→Preview updates live; copy the CSS to use in a ::before or ::after pseudo-element.
→Useful for tooltips, dropdown arrows, and decorative UI elements.

Direction

Width (px)50px

Height (px)50px

Color

#10b981

Preview

CSS Output

.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #10b981;
}