CSS Triangle Generator

Generate CSS triangles using the border hack technique with live preview.

Direction

Preset Sizes

Width80px

Height80px

Color

Preview

CSS

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-right-width: 40px;
  border-right-color: transparent;
  border-bottom-width: 80px;
  border-bottom-color: #3b82f6;
  border-left-width: 40px;
  border-left-color: transparent;
}

How it works: CSS triangles are created by setting width: 0; height: 0; on a block element and using large border values. The visible border edge forms the triangle; adjacent sides are set to transparent.

Loading tool...