G4GAME/DevTools

CSS Triangle Generator

Need a caret, arrow or speech-bubble tip? Pick a direction, width, height and color and get the classic zero-size border triangle in seconds.

Last updated: · Runs 100% in your browser

// controls
120px
100px
Live preview
Generated CSS
.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid #00ff66;
}

// Example output

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid #00ff66;
}

// Features

  • ▸Up, down, left and right
  • ▸Independent width and height
  • ▸Any color
  • ▸No images or SVG needed
  • ▸Ideal for tooltips and dropdowns

// How to use

  1. 01Adjust the controls on the left or pick a preset to start the CSS Triangle Generator.
  2. 02Watch the live preview update instantly as you change each setting.
  3. 03Fine-tune the generated CSS by hand in the code panel if you like.
  4. 04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Clip-path Generator
Clip elements into triangles, hexagons, stars, arrows and more with ready-made CSS clip-path shapes.
CSS Tooltip Generator
Build pure-CSS tooltips with arrows in any direction, custom colors and hover/focus support.
CSS Ribbon Generator
Add corner ribbons like “New” or “Sale” to cards with a configurable CSS ribbon generator.