Skip to content
uxTools
Design & CSS

CSS Triangle Generator

Eight directions (4 cardinal + 4 right-corner), independent base / height / skew sliders, color and canvas pickers, common-use templates (tooltips, carets, ribbons, play buttons), tooltip-positioning snippet, an educational "why it works" panel, and CSS / Tailwind / React style / SCSS mixin / HTML output.

Live preview

The triangle is a real 0×0 div with thick coloured borders — no SVG, no clip-path.

100px × 80px
I am a tooltip

Triangle

Pick a direction, dial in size, lean and color.

Direction
100px
80px
50%
Tooltip preview

Show the triangle as a real tooltip arrow over a sample card.

Quick presets

One-click recipes for the shapes you reach for most.

Code output

Copy in your preferred flavor.

CSS
.triangle-up {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 50px 80px 50px;
  border-color: transparent transparent #3b82f6 transparent;
}
border-width: 0px 50px 80px 50px
border-color: transparent transparent #3b82f6 transparent