consolelog.tools

CSS Triangle Generator

Generate CSS triangles in 8 directions with the classic border trick or a modern clip-path — tune width, height, and color with a live preview. Export CSS, SCSS, Tailwind, or JS.

About this ToolHow it works, benefits & use cases

Pure-CSS triangles power tooltips, dropdown carets, ribbons, and speech bubbles — and this generator builds them two ways without you memorizing the math. Pick one of eight directions from the compass grid (up, down, left, right, and all four diagonals), then choose the classic border trick (a 0×0 element whose borders form the shape) or a modern clip-path (a real-sized element clipped to a polygon). Width and height map to the triangle's base and height in both modes, and a color picker with a paired hex field sets the fill. The dotted-canvas preview redraws instantly as you drag the size sliders. When it looks right, export it as CSS, SCSS, a Tailwind arbitrary-value class, or a JS inline-style object, then copy, download, or share via URL.

How to Use

  1. 1Click a direction in the 3×3 compass to point the triangle up, down, left, right, or toward any corner.
  2. 2Choose a Method: "Border trick" for a bulletproof 0×0 element, or "Clip-path" for a real element that can hold content or a background.
  3. 3Drag the Width and Height sliders to set the triangle's base and height (2–400px each).
  4. 4Set the fill with the color swatch or type a value into the hex field next to it.
  5. 5Pick an Output format (CSS, SCSS, Tailwind, or JS), then copy, download, or share the snippet.

Key Benefits

  • Eight directions chosen from a visual compass, including all four diagonals
  • Two techniques: the classic border trick or a modern clip-path polygon
  • Live dotted-canvas preview that mirrors the exported code exactly
  • Independent width and height control over the triangle's base and height
  • Color picker paired with an editable hex field
  • Exports to CSS, SCSS, a Tailwind arbitrary value, or a JS inline-style object
  • Runs entirely in the browser with a shareable URL for every shape

Common Use Cases

  • Adding a caret to a tooltip, popover, or dropdown menu
  • Drawing speech-bubble tails and notification pointers
  • Building corner ribbons and folded-tag decorations
  • Creating play-button and chevron icons without an SVG asset
  • Learning how the CSS border trick produces a triangle from a zero-size box
140×110px • border trick

Direction

Method

Size & color

Copy, download, share, or pipe to another tool

.triangle {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 110px solid #6366f1;
}

Two ways to draw a triangle

The border trick sizes a 0×0element's borders so the colored side becomes a triangle — bulletproof in every browser, great for tooltips and carets. Clip-pathclips a real element to a triangle, so it can hold content or a background image. Width and height map to the triangle's base and height either way.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools