CSS Triangle Generator

Create pure-CSS triangle shapes using the border trick, with direction and size controls.

Controls

Direction

Width — 80px

Height — 60px

Color

Live preview

Generated CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 60px solid #ec4899;
}