Shapes

Preview

Customize

Size

Primary Color

Rotation

deg

CSS

.shape {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 120px solid #8b5cf6;
}

HTML

<div class="shape"></div>

About CSS Shape Generator

Build classic CSS shapes visually — triangles, hearts, stars and more — with borders, pseudo-elements and transforms. Customize and copy the CSS instantly.

Building a custom shape instead? Try the Clip-Path Generator or the Border Radius Generator.