Skip to main content

CSS Triangle Generator

Create CSS triangle and arrow shapes using the pure-CSS border technique. Triangle generator and path CSS generator in one.

Reviewed by · Last reviewed

100px
100px
CSS
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3b82f6;

Building a Triangle

  1. Pick a direction from the buttons - up, down, left, right, or any of the four diagonals. The diagonals produce right-angled triangles, useful for corner flags and folded-page effects.
  2. Drag the width slider to set the base - the side opposite the pointed tip. For symmetric (non-diagonal) triangles, width is the horizontal extent of the triangle.
  3. Drag the height slider for the altitude - the distance from base to tip. Setting width equal to twice the height produces an equilateral-looking triangle; equal width and height give an isoceles right triangle.
  4. Choose a color. The color picker drives a single border-color on the visible side of the shape; the other three sides stay transparent.
  5. Copy CSS. The output is a zero-dimension element with four carefully sized borders and vendor-prefix-free.

The border trick in detail

CSS triangles exploit a quirk of the box model: when an element has zero width and zero height, its four borders meet in the center, and adjacent borders share a 45-degree diagonal edge. Make three borders transparent and one opaque, and you are left with a trapezoid - which collapses to a triangle when the zero-dimension constraint is enforced. The visible border defines the base, and its width plus the opposing border\'s width defines the altitude.

This is not a quirk the CSS specification explicitly endorses - it emerges from the border shorthand rules in CSS Backgrounds and Borders Level 3, which require borders to miter at 45 degrees when they meet at a corner. Every browser back to Netscape 6 has rendered this way, so it works everywhere without polyfills. The render path is the same as any bordered element: the compositor rasterizes the four border mitres as colored triangles and composites them. That means CSS triangles participate in transform, opacity, and transition like any other element, and they do not require a GPU shader like SVG-based triangles do in some renderers.

Good places to use a CSS triangle (or CSS arrow)

  • Tooltip pointers attached to a caption box via absolute positioning.
  • Speech bubbles where the triangle is a pseudo-element on a rounded rectangle.
  • Dropdown indicator arrows next to select buttons and expandable headers.
  • Ribbons and banners with a notched end, created by stacking two triangles.
  • Progress step connectors - the chevron shape between numbered steps in a wizard.
  • Pagination arrows where you want a sharp geometric style rather than an icon font.

Issues that catch people out

  • Non-integer borders antialias badly. A 13.5px border on one side and a 13.5px base on another can produce a visible jag at the tip on 1x displays. Round to whole pixels or accept the blur on high-DPR screens.
  • Background-color bleeds through. The element still has a background area; if you set background-color you\'ll see a square behind your triangle. Always leave the background transparent.
  • The diagonal triangles are right-angled only. To produce a 30/60/90 triangle you need clip-path or SVG - the border trick mathematically can only make isoceles and right triangles.
  • Rotation for arbitrary angles is a trap. transform: rotate() works, but the anchor point sits at the center of the zero-size box, which is often not where visual designers expect. Combine transform-origin with an explicit offset.
  • Borders on pseudo-elements need content: "". When placing the triangle as a tooltip pointer, the ::before / ::after must declare content or the element doesn\'t render at all.
  • Outlines don\'t follow the triangle. The browser draws focus outlines around the bounding box of the zero-dimension element - a square ring. For interactive triangles, use clip-path or custom box-shadow for the focus indicator.

Why this works: a bit of box-model background

The CSS Backgrounds and Borders Module Level 3 specifies that when two adjacent borders of different colors meet at an element corner, the transition between them is a diagonal line bisecting the corner at 45 degrees. That rule - originally pragmatic, to make multi-color borders look acceptable - is what the triangle trick exploits. It predates CSS 2.1 and is one of the earliest cross-browser layout behaviors to become formalized. Compare to the clip-path alternative: clip-path: polygon(50% 0, 0 100%, 100% 100%) produces a mathematically exact triangle using CSS Masking Module Level 1, but it was only universally supported from 2018 onward. The border trick remains useful precisely because it works in every browser that supports CSS at all - including the Kindle Paperwhite\'s stripped-down WebKit build - and requires no extra painting passes.

Triangle techniques compared

Three ways to draw a triangle in the browser, each with tradeoffs. The border trick (what this tool generates) works everywhere, needs zero markup, and is trivially animatable through standard CSS properties - perfect for tooltip pointers and decorative arrows. clip-path: polygon() from CSS Masking Level 1 lets you clip any sized element to any triangular shape, which is more flexible (acute and obtuse triangles are straightforward) and plays well with backgrounds and images, but loses out on focus-outline and older-browser support. Inline SVG <polygon> is the most powerful - exact geometry, gradient fills, strokes, and per-vertex animation via <animate> - but ships more markup and breaks the "pure CSS" aesthetic. For most UI work - especially tooltip chrome - the border trick is still the right tool because it composes cleanly into the containing element\'s design tokens. For content triangles, SVG wins. Compared to icon fonts like Font Awesome, CSS triangles are cheaper (no font download), more themeable (inherit color-family CSS variables), and infinitely scalable.

Frequently Asked Questions

Why does a CSS triangle need zero width and zero height?

Because the trick relies on the four borders meeting at a single central point and mitering at 45 degrees. With any positive content-box size, the borders frame a rectangle instead of collapsing to a single point - you'd see the content area surrounded by triangular slivers, not a triangle. Setting <code>width: 0</code> and <code>height: 0</code> forces the borders to intersect at the origin, which is what lets three of them vanish into invisibility.

Can I make an equilateral triangle this way?

Only approximately. A true 60-60-60 equilateral triangle requires a height-to-base ratio of roughly 0.866:1. The border trick produces an isoceles triangle where height equals the opposing border width and base equals twice the visible border width - so to approximate equilateral, set the base at roughly 2x the height (e.g. 20px base, 17px height). For pixel-perfect geometry, switch to <code>clip-path: polygon(50% 0, 0 100%, 100% 100%)</code>, which can also accept exact angles.

How do I attach a triangle to a speech bubble?

Use a <code>::before</code> or <code>::after</code> pseudo-element on the bubble with <code>position: absolute</code>, then apply the triangle borders. Set <code>content: ""</code> (required for pseudo-elements to render), place it relative to the bubble with <code>top</code>/<code>left</code>/<code>right</code>/<code>bottom</code>, and match the visible border color to the bubble's background. For a speech bubble with a border, you need two stacked triangles - one slightly larger in the border color, one smaller in the fill color offset by the border width.

Does the triangle hit-test like a rectangle or like a triangle?

Like a rectangle, unfortunately. Because the element has zero dimensions, its bounding box for hit-testing is effectively a single pixel - most of the "triangle" you see is painted outside the element's content area, via border rendering. To make a clickable triangular button, use <code>clip-path</code> on a normal-sized element; its hit area will match the clipped triangle.

Is my triangle configuration shared with anyone?

No. Direction, width, height, and color values live in the component's local state. The CSS output is computed from a template literal and displayed in a read-only textarea; the preview is rendered with an inline <code>style</code> attribute. There is no network request tied to adjusting the sliders.

Can I animate a CSS-triangle?

Yes. Because borders are standard CSS properties, you can transition <code>border-width</code>, <code>border-color</code>, and the element's <code>transform</code> smoothly. Be aware that animating <code>border-width</code> can cause repaint rather than compositing, so for 60fps hover effects prefer <code>transform: scale()</code> or use <code>clip-path</code> which composites cheaply.

When should I prefer clip-path over the border trick?

Whenever the triangle needs to contain content (text, images, backgrounds), needs a non-isoceles shape, or needs to be part of a hit-tested interactive element. <code>clip-path: polygon(...)</code> works on any sized element and clips its content, borders, and backgrounds together. The border trick wins when you just need a decorative arrow or pointer that sits next to another element, has no content, and benefits from universal browser support.

Can I give a CSS triangle a gradient fill?

Not directly - the border trick uses a solid <code>border-color</code> which is a single color value, not a gradient. Workarounds include placing a gradient-filled <code>&lt;div&gt;</code> inside a triangle-clipped container with <code>clip-path</code>, or using an SVG <code>&lt;polygon&gt;</code> with a <code>&lt;linearGradient&gt;</code> fill. For animated or multi-stop gradients on the triangle shape, SVG is the cleanest choice.

Is "triangle css generator" the same as "css triangle generator" or "path css generator"?

Yes - the phrasing varies but the tool is the same. "Triangle generator css", "triangle css generator", "css triangle generator" and "path css generator" all describe a utility that writes the CSS for a triangle or arrow shape. This page outputs the classic border-trick triangle (most compatible and most common), and the related <a href="/tools/css-clip-path-generator/">CSS clip-path generator</a> covers arbitrary polygon paths if you need asymmetric or obtuse triangles.

More CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool