CSS Triangle Generator

Create beautiful CSS-only triangles for tooltips, dropdowns, and ribbons.

Direction

Color

Width (px)

Height (px)

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

Privacy & Security Guaranteed

Your files and data are processed securely. Where possible, processing is done entirely locally within your browser. We do not store your data or upload it to external servers without strict automatic deletion policies.