Generator Tools

CSS Triangle Generator

Build pure-CSS triangles for arrows, tooltips, and corners. Eight directions, live preview, color picker, plus CSS, JSX, Tailwind, and SVG output.

Quick presets

Live preview

Bounding box: 120px wide by 60px tall. The element itself is 0 by 0; the visible shape is drawn entirely with borders.

Direction

Points up. Color on bottom border.

Size60px

Width100%

Stretches the base. 100% gives an equilateral-style shape, lower values give a tall arrow, higher values give a wide banner.

Triangle color

Outline color

Show bounding outline

CSS

Plain CSS class. Apply it to a div with class triangle.

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 60px 60px 60px;
  border-color: transparent transparent #3b82f6 transparent;
}

JSX inline style

Drop-in React snippet using inline style. Useful for one-off icons inside a component.

<div
  style={{
    width: 0,
    height: 0,
    borderStyle: "solid",
    borderWidth: "0px 60px 60px 60px",
    borderColor: "transparent transparent #3b82f6 transparent",
  }}
/>

Tailwind v3+

Arbitrary-value Tailwind utilities. Combine on a single element.

w-0 h-0 border-solid border-t-[0px] border-r-[60px] border-b-[60px] border-l-[60px] border-t-[transparent] border-r-[transparent] border-b-[#3b82f6] border-l-[transparent]

SVG

Equivalent SVG polygon. Use when you need scaling, strokes, or SVG-only contexts.

<svg width="120" height="60" viewBox="0 0 120 60" xmlns="http://www.w3.org/2000/svg">
  <polygon points="60,0 120,60 0,60" fill="#3b82f6" />
</svg>

How the border-trick works

A box that is zero pixels wide and zero pixels tall has nothing to render except its borders. When three of those borders are transparent and one is colored, browsers paint the visible border as a filled triangle whose base equals the sum of the perpendicular neighbor borders and whose height equals the colored border's width. Right-angle directions zero out one neighbor border so the triangle fills the corner instead of pointing along an axis.

Generated values run entirely in your browser. Nothing is uploaded.

How to use

Pick a quick preset (Tooltip arrow, Back button, Play button, Ribbon corner, Tall, Wide, or Speech tail) for a known-good starting shape, or skip presets and configure from scratch.
Choose a direction. The four cardinals build axis-aligned arrows; the four right-angle corners build ribbons and decorative corner triangles.
Drag the Size slider to set how tall the triangle is, then drag Width to stretch the base. Lower than 100% gives a narrow arrow head; higher than 100% gives a wide banner.
Pick a triangle color with the swatch or paste a hex value. Toggle the bounding outline to see the element's box (which is 0 by 0; the visible shape is painted with borders).
Switch the preview background between Transparent, Dark, and Light to confirm the shape reads against your real UI surface.
Copy the CSS class for stylesheets, the JSX inline-style snippet for React components, the Tailwind utilities for utility-first codebases, or the SVG polygon when you need a scalable fallback.

About this tool

CSS Triangle Generator builds the pure-CSS shape that powers tooltip arrows, dropdown carets, ribbon corners, play buttons, speech-bubble tails, and chevrons. The technique relies on the border-trick: a zero-by-zero element gets four borders, three of them transparent and one colored, and the browser renders the visible border as a filled triangle. The tool exposes that math through a visual editor instead of trial-and-error tweaking. Eight directions are covered: the four cardinals (up, down, left, right) for axis-aligned arrows and the four right-angle corners (up-left, up-right, down-left, down-right) for ribbons and decorative corner shapes. A size slider controls the triangle's height, a width slider stretches the base from a narrow tall arrow at 20% all the way to a wide squat banner at 300%, and a color picker plus hex input keep the shape in sync with your design tokens. The live preview switches between a transparent checkerboard, a dark canvas, and a light canvas so you can sanity-check the triangle against the surface it will sit on, and an optional dashed bounding outline shows the actual element box (which is 0 by 0 even though the border-painted triangle reaches the full bounding-box dimensions). Output is generated in four formats so you can copy whichever fits your stack: a plain CSS class with explicit border-width and border-color shorthand, a JSX snippet with an inline style object for one-off React components, Tailwind v3+ arbitrary-value utilities for projects that lean on Tailwind, and an SVG polygon fallback when you need the triangle to scale freely, accept a stroke, or live inside an SVG-only context. Quick presets seed common configurations: an 8px tooltip arrow, a 14px back-button chevron, a 24px play button, an 80px ribbon corner, a tall narrow arrow head, a wide hero banner, and a small speech-bubble tail. Useful for frontend developers wiring tooltips and dropdowns without an SVG icon system, designers prototyping speech bubbles and ribbons in the browser, and anyone who has searched for the border-trick math and wanted a visual tool instead of a static reference. All generation runs in your browser; values are never uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Triangle Generator

How to use

About this tool

You may also like

CSS Border Radius Generator

CSS Box Shadow Generator

CSS Gradient Generator

CSS Clamp Generator

CSS Filter Generator