CSS Triangle Generator — Pure CSS Triangles in 8 Directions

Overview

CSS Triangle Generator generates pure CSS triangles — no images, no SVG.

🔗 https://devnestio.pages.dev/css-triangle-gen/

Features

• 8 directions: up, down, left, right, and all 4 diagonal corners
• Two methods: border trick and clip-path polygon
• Adjustable width, height, and color with live preview
• One-click copy of the generated CSS

The two methods

Border method — classic technique, IE9+ compatible:

.triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid #f59e0b;
}

clip-path method — cleaner and animatable:

.triangle {
  width: 60px;
  height: 60px;
  background: #f59e0b;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Corner triangles (right-angle triangles for ribbons and notch effects) are supported too.

👉 Try it: https://devnestio.pages.dev/css-triangle-gen/