CSS Triangle

Generate CSS arrows / triangles using the classic transparent-border technique.

Settings

Direction

Width: 80px

Height: 60px

Color

Preview

CSS

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