Free CSS Triangle Generator

The Border Trick, A 25-Year-Old CSS Hack That Still Works

The CSS triangle technique exploits how the CSS border-painting algorithm handles adjacent borders. When two borders meet at a corner, the boundary between them is drawn as a diagonal line at the angle that bisects the corner. With a normal-sized element, the corner is small and the diagonal is barely visible. But if you set the element's width and height to zero and give it thick borders, the corners take over the entire visual space, and what was an invisible diagonal becomes the visible edge of a triangle. Make three of the four borders transparent, leave the fourth coloured, and you've drawn a single triangle pointing away from the coloured side. The technique was first widely documented around 2007–2008 in early CSS-tricks articles by Chris Coyier and others; it has been a staple of the web designer's toolkit ever since because it produces a sharp, scalable, hex-colourable shape with no SVG, no PNG, no extra HTTP request, and no complicated CSS. The math is simple but counter-intuitive (the triangle's height is the border-width of the coloured side; its base is twice the border-width of the adjacent transparent side). This generator handles the math so you can drag sliders instead of computing border-widths.

Modern Alternatives, clip-path, SVG, conic-gradient

In 2026, the border-trick triangle has competition. CSS clip-path with the polygon() function (CSS Masking Module Level 1, baseline browser support since 2017) lets you clip any element to an arbitrary polygon: clip-path: polygon(50% 0, 100% 100%, 0 100%) draws an upward-pointing triangle on any element. clip-path is more flexible (any number of vertices, not just three; works on any element with content inside, not just empty divs), composes better with transforms and animations, and supports rounded corners via the newer shape() function. Inline SVG (<svg><polygon points="50,0 100,100 0,100"/></svg>) gives you the most control, strokes, fills, gradients, animations via SMIL or CSS, accessibility via <title> elements. conic-gradient can produce triangle shapes via cleverly-placed colour stops, though this is more of a curiosity than a practical pattern. The border-trick triangle remains the right choice for the simple-decorative case (tooltip pointers, dropdown carets, speech-bubble tails) where simplicity and zero-overhead matter more than flexibility; clip-path is better when the triangle is part of a more complex shape, when you need to put text inside, or when the design might need rounded corners.

Where CSS Triangles Earn Their Keep

• Tooltip and popover pointers. The little triangle that connects a tooltip bubble to its anchor element is the most common use case, you can build it as a CSS triangle pseudo-element (::before or ::after) on the tooltip, positioned over the edge facing the anchor.
• Speech-bubble tails. The pointed tail on chat-message bubbles, comment cards, and quote callouts. Same technique as tooltip pointers, just larger and styled to match the bubble's background colour.
• Dropdown caret indicators. The small downward triangle in select boxes and dropdown menu buttons. Native <select> elements have OS-styled carets; custom dropdowns built from <button> + popover need their own.
• Accordion expand/collapse indicators. The triangle that flips between right-pointing (collapsed) and downward-pointing (expanded) when you click an accordion section. Animated with a CSS rotate transform.
• Breadcrumb separators. The right-pointing triangle between breadcrumb links. Often built as a CSS triangle with ::before.
• Banner and ribbon decorations. The triangular notch at the end of a sale banner or tag, the corner-fold on a "new" badge, the chevron at the bottom of a hero section pointing down to scroll. All single-colour triangles, all border-trick.
• Decorative dividers. A row of small triangles as section dividers, geometric pattern overlays, retro-style flourishes.

Accessibility Considerations

CSS triangles are pure visual decoration, they have no semantic meaning and no presence in the accessibility tree. Screen readers don't announce them. For purely decorative use (the speech-bubble tail, the breadcrumb separator) this is correct behaviour. For triangles that convey meaning (an arrow pointing to the active section, a dropdown caret indicating "click for more"), the meaning needs to be communicated through other means: an aria-expanded attribute on a dropdown trigger, a visible text label, an aria-label on the button. Don't rely on a CSS triangle to communicate state; treat it as a visual reinforcement of state that's communicated semantically through other attributes. The CSS ::before and ::after pseudo-element content is generally not read by screen readers, which is appropriate for decorative shapes.

Triangle Types This Generator Produces

• Up / Down: isosceles triangles pointing upward or downward, the most common shape for tooltips and accordion indicators.
• Left / Right: pointing left or right, used for breadcrumbs and right-rail callouts.
• Top-left / Top-right corners: right triangles that fit into the corner of a containing element. Used for ribbon-fold and corner-badge effects.
• Bottom-left / Bottom-right corners: right triangles for the opposite corners.
• Custom aspect: adjustable width-to-height ratio for non-equilateral shapes, useful when a tall narrow pointer or a wide flat chevron is wanted.

Related Tools