Triangle CSS Generator

Triangle CSS Generator generates CSS code for creating triangle.
Two patterns are available: using clip-path property or using border property.
Bordered and gradient color designs are also available.
The output CSS code can be easily used by copy and paste.

Sponsored Links

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

The clip-path property is now supported by all major browsers except Internet Explorer. (Supported Browser)
(* Only when clip-path is used, the color can be gradated.)

Customization

Triangle

▼ Direction

▼ Type

▼ Size

px
px

▼ Color

Border

Additional Setting

CSS Code

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

Notes

  • It is intended for use with modern browsers and may contain CSS properties that are not supported by IE or older versions of browsers.
  • The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.

\ Share on SNS /

Sponsored Links

Tools

CSS Generators

UI Parts Generators

HTML Converters

Image Generators