Webspe Tools

JP EN

Triangle CSS Generator

Create custom CSS triangles with this free online generator.
Choose between clip-path and border-based triangles, then customize the direction, size, color, border, and other settings with a real-time preview.
Copy the generated CSS code and use it directly in your website or web project.

Sponsored Links

Use clip-path? (* Customization settings will be reset if this is changed.)

clip-path is supported by all modern browsers. (Supported Browser)
(* Gradients are available only when using clip-path.)

Customization

Triangle

▼ Direction

▼ Type

▼ Size

px
px

▼ Color

Border

CSS Code

.triangle {
  display: inline-block;
  width: 120px;
  height: 80px;
  background: #ff0000;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

Notes

  • This tool is intended for modern browsers. Some generated CSS may not work in older browsers.
  • This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.

\ Share on social media /

Sponsored Links

Related Tools

View All Tools