CSS Triangle Generator – Create Pure CSS Triangles with Live Preview

About the CSS Triangle Generator

A CSS triangle is not a shape element at all — it’s a box with zero width and height whose thick borders meet at diagonal seams. Make three of those borders transparent and the fourth one visible, and the remaining wedge renders as a triangle. This CSS Triangle Generator handles that border math for you across eight directions: up, down, left, right, and the four right-angled corner variants (top-left, top-right, bottom-left, bottom-right).

Three style modes cover the shapes you actually need in an interface. Solid produces the classic single-element triangle using the border trick. Bordered stacks two triangles with ::before and ::after pseudo-elements so a filled shape sits inside a contrasting outline — the standard technique for tooltip and popover arrows that must match a bordered container. Outlined uses the same two-layer approach with a white inner triangle, producing a hollow arrow.

Everything renders live against a checkerboard backdrop so you can see exactly how the shape behaves over transparency, and the generated CSS updates in the code panel with every change. Width and height are independent, so a 10×16 triangle gives you a narrow chevron while 30×40 gives you a media play button.

Because triangles are built entirely from borders, they pair naturally with other border-based CSS. Once your arrow is in place, the CSS Border Radius Generator helps you round the container it points away from so the two shapes read as one component.

The preset library holds 62 ready-made triangles in 12 categories — Arrows, Carets, Tooltips, Bubbles, Navigation, Tabs, Popovers, Badges, Media, Decorative, UI, and Outlined. Each preset carries its own direction, dimensions, color, and border settings, so clicking one loads a complete working configuration you can then adjust. Search by name or category, and the live count shows how many presets match your filter.

Our editorial team at BigToolSite verified every direction against all three style modes, checked the pseudo-element offsets on bordered and outlined output, and confirmed the copied CSS renders identically to the on-page preview in current browsers.

How to Use the CSS Triangle Generator

• Pick a Direction from the eight-button grid. The first four point up, down, left, and right; TL, TR, BL, and BR produce right-angled corner triangles used for ribbons and corner accents.
• Choose a Style: Solid, Bordered, or Outlined. Selecting Bordered or Outlined reveals the Border Width and Border Color fields, which stay hidden in Solid mode.
• Set Width and Height in pixels, from 10 up to 500. These control the base and the point independently, so an isosceles triangle simply means matching values.
• Set the Fill Color with the swatch picker or by typing a six-digit hex code — the two fields stay in sync, and the preview only updates once the hex value is valid.
• For bordered and outlined shapes, set the Border Width (1–50px) and Border Color. The outer shape grows by twice the border width, which the generator accounts for automatically.
• Browse Quick Presets: filter by category chip, type in the search box, then click any preset to load its full configuration into the controls.
• Check the live preview over the transparent checkerboard, then use Copy CSS at the top right of the code panel to grab the finished rule.

Example Usage

Input: Direction Up, Style Solid, Width 20px, Height 20px, Fill #2563eb

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #2563eb;
}

The width is split across the two transparent side borders, while the height becomes the single colored border opposite the point. That relationship is why an upward triangle uses border-bottom rather than border-top.

Input: Direction Right, Style Solid, Width 30px, Height 40px, Fill #1f2937 (the Play Button preset)

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #1f2937;
}

Input: Direction Up, Style Bordered, Width 24px, Height 24px, Fill #ffffff, Border 3px #2563eb

Bordered output wraps a 30×30 container around two pseudo-element triangles — the outer one drawn in the border color, the inner one inset by the border width and drawn in the fill color. Paste the rule into your stylesheet and apply .triangle to an empty div, or rename the selector and attach it to an existing tooltip.

Corner directions behave differently: TL, TR, BL, and BR each use only two borders instead of three, producing a right-angled wedge that sits flush in a container corner. Set both dimensions to the same value and you get a 45-degree ribbon end. To layer depth beneath one of those corner accents, the CSS Box Shadow Generator builds the matching shadow rule.

Triangle rules are short but add up across a component library. Running the finished stylesheet through the CSS Minifier strips the whitespace before deployment.

Frequently Asked Questions