CSS Triangle Generator

Create CSS triangles using borders

Browser ProcessingYour data never leaves your browser

Triangle Direction

Size

Width80px

Height80px

Equal Sides

Color

Preview

CSS (Border Method)

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

CSS (Clip-path Method)

.triangle {
  width: 80px;
  height: 80px;
  background-color: #3b82f6;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

HTML

<div class="triangle"></div>

Quick Select

CSS Box Shadow GeneratorGenerate CSS box-shadow with visual editor

CSS Text Shadow GeneratorGenerate CSS text-shadow effects visually

CSS Border Radius GeneratorCreate custom border-radius with visual editor

CSS Triangle Generator

Related Tools