A CSS triangle is most often painted by an element whose content width and height are both zero, with two transparent borders forming the slopes and one colored border pointing in the chosen direction. That single technique, the border-trick, is the basis of every border-based CSS triangle and is what the CSS Triangle Generator builds for you, but it is not the only way to put a triangle on a page. Web designers typically choose between the border trick, CSS clip-path, inline SVG, and background gradients, and each one trades off compatibility, flexibility, and code weight in a different direction. Choosing among them is mostly a matter of what shape you actually need, what your browser support floor looks like, and how much markup you are willing to inherit.
The border trick is appealing because it needs nothing beyond longhand border declarations, has effectively universal browser support, and produces a small, paint-only shape that leaves the layout box empty. Clip-path gives you any polygon and any angle but uses a syntax that, while solid in evergreen browsers, is still worth verifying in older targets. SVG is the heaviest option in markup terms but the most expressive, handling curves, strokes, and arbitrary points without the limits a flat solid color imposes. Background gradients are useful when you only need a directional flag, because a hard color stop inside a linear-gradient can render a right triangle cheaply. Comparing them on paper is straightforward once you put the trade-offs side by side.
The Four Common Approaches to a CSS Triangle
The border-trick approach sets the element's content box to zero and lets borders do the visible work. Two adjacent transparent borders form the sloping sides, and a third colored border, equal to the chosen height or width, points in the requested direction. An upward triangle, for example, has a colored bottom border with transparent left and right borders; a right triangle has a colored left border with transparent top and bottom borders. The technique is purely declarative, has no runtime cost beyond painting borders, and survives every environment that supports CSS 2.1 borders.
Clip-path with the polygon() function carves a triangle out of any rectangular element. Because the element keeps a real content box, layout, hit testing, and overflow behave the way they would for any block, and you can shape any number of points at any angle. The trade-off is that the visible shape is a mask over the element's own background, so gradients, images, and currentColor still flow through naturally without extra plumbing.
Inline SVG places an svg element directly in the markup and draws the triangle with a polygon or path command. With an explicit viewBox, the shape scales predictably, and SVG can express curves, strokes, fills, and masks that no border-only method can match. The downside is markup weight and the need to coordinate fill colors with the rest of the design system.
Background gradients draw a triangle from a linear-gradient with a hard color stop. The container keeps its full size, so layout and padding behave normally, and you can paint a directional arrow with just a background declaration. This route is best for small directional flags where a right triangle is acceptable and where you want to avoid touching the DOM.
What Each Approach Handles Well and What It Does Not
The table below compares the four approaches on the dimensions that usually drive the choice. The capabilities listed are the ones supported by current browser documentation; the in-browser details for the border path are taken from the CSS Triangle Generator's own contract.
| Approach | Shape support | Compatibility | Markup cost | Best for |
|---|---|---|---|---|
| Border trick | Solid straight-edged triangles, four directions | Effectively universal (CSS 2.1 borders) | One div with explicit longhand border declarations | Decorative arrows, tooltip pointers, separators |
| clip-path polygon() | Any polygon, any angle, any number of sides | Strong in evergreen browsers, verify older targets | One div plus one clip-path declaration | Modern layouts, irregular shapes, sharp angles |
| Inline SVG | Curves, strokes, gradients, hollow shapes, arbitrary polygons | Universal for inline SVG | svg plus path or polygon element | Expressive icons, scalable markers, themed arrows |
| linear-gradient with hard stop | Right triangles and directional flags | Strong in evergreen browsers | One background declaration, no extra element | Pure CSS arrows that follow the element box |
The comparison shows the pattern that tends to decide the choice: pick the border trick when you want the smallest possible DOM and a solid, straight-edged triangle in one of the four cardinal directions; choose clip-path when you need arbitrary angles and can rely on modern browsers; reach for SVG when the shape must curve, hollow, or scale to an exact viewBox; and use a gradient when the triangle is a tiny, decorative flag and the element already exists for another reason.
When the Border Trick Is the Right Choice
The border trick earns its place in the comparison whenever the request is a solid, straight-edged triangle in one of four directions, up, down, left, or right, and the surrounding design does not need curves, gradients, or hollow centers. Tooltip pointers, breadcrumb separators, accordion indicators, and dropdown chevrons all fit that profile. Because the element's content width and height are both zero, the triangle does not push siblings around, so it can be aligned with absolute positioning or floated next to text without altering line height. Border triangles also keep their painted shape under 200 percent zoom and forced colors, which is part of why they remain the default for accessible, decorative UI markers.
The approach also pairs cleanly with design tokens. The colored border is the only property that carries brand color, so swapping a literal HEX for a custom property is a one-line change once the triangle is in place. The transparent borders must remain transparent for the slopes to render, so any token swap should target the single pointing border and leave the slope borders untouched.
For readers who already know the border trick is the right pick and just want to skip the math, the CSS Triangle Generator applies the four-direction recipe directly: it splits the perpendicular base with floor and ceiling transparent borders, assigns the full pointing dimension to one colored border, and exposes the same declarations in the live preview that appear in the copied output.
Generate a Border Triangle Step by Step
- Open the CSS Triangle Generator in a browser tab. The page renders with a default direction, width, height, and color so you can see the result immediately.
- Choose the triangle direction from up, down, left, or right. The generator maps that choice to the appropriate colored border, bottom for up, top for down, right for left, and left for right, and leaves the perpendicular side borders transparent.
- Set the visible width and height as whole numbers between 10 and 300 pixels. For an upward or downward triangle, the two transparent side borders add up to the selected width and the colored border equals the selected height. For a left or right triangle, the transparent top and bottom borders add up to the selected height and the colored border equals the selected width.
- Enter a six-digit HEX color in the form #RRGGBB. The generator normalizes the value to lowercase and paints it as an opaque border; alpha channels, CSS variables, and currentColor are intentionally outside the generator's scope.
- Inspect the live result at the approximate size and background where it will be used. The preview uses the same derived border declarations shown in the CSS output, so what you see is what gets copied.
- Copy the CSS block first, then the HTML block, using the dedicated Copy buttons. Each copy request asks the browser for clipboard permission separately and reports success with the format that was just copied. If clipboard access is denied, both code blocks remain visible for manual selection and the page does not falsely report success.
- Rename the generated class if lizely-triangle would clash with an existing stylesheet, and update both the CSS and HTML output together so they stay synchronized. The HTML snippet contains one div with the generated class and aria-hidden="true", which is the right accessibility treatment for a decorative shape.
What the Border Trick Will Not Produce
Border triangles are intentionally limited, and the comparison only stays honest if those limits are explicit. The element's measurable content box is zero while its painted borders occupy space, so layout, transforms, hit testing, outlines, overflow, and alignment can be less intuitive than an SVG element with an explicit viewBox. A border triangle cannot directly create a rounded tip, a curved edge, a hollow center, a gradient fill, a stroke, a complex shadow, or an arbitrary polygon. Those needs belong to SVG or clip-path, and both should be tested for support in the target environment before adoption.
The HEX color is painted as an opaque border. Alpha colors, CSS variables, gradients, currentColor, wide-gamut syntax, and theme tokens are not generated by this focused tool. After copying, swapping the literal HEX for a trusted design token can improve theming, but the transparent side borders must remain transparent for the geometry to hold. A triangle that sits next to text should also be checked in light and dark themes rather than assumed to inherit enough contrast.
How an Odd Base Stays Exact
One subtle point the comparison does not usually surface is that odd dimensions split with floor and ceiling rather than evenly. For an upward triangle with a 41-pixel base, the transparent left and right borders become 20 pixels and 21 pixels, not 20.5 pixels each. The reason is that Chromium can quantize two 20.5-pixel borders down to 20 pixels each, which would shrink the painted base from 41 to 40 pixels. The one-pixel asymmetry preserves the requested total painted dimension instead of silently losing a pixel. Rasterization can still vary with zoom level and device pixel ratio, so the painted result is a contract between the geometry and the browser, not a guarantee independent of rendering.
Verify the Result in the Destination Component
Comparing approaches only gets you to the right method; the rest is making sure the chosen triangle behaves in the place it lands. Open the destination page with the triangle in place and inspect it at 200 percent zoom, with high contrast mode on, with forced colors enabled, and at the most common mobile widths for your audience. Confirm that the decorative aria-hidden="true" is still appropriate, since it is correct for a decorative arrow or separator that conveys no information, but if the triangle communicates state, direction, validation, or navigation, do not rely on the silent snippet alone. Add visible text or an accessible label to the surrounding interactive control, and keep the decorative triangle hidden from assistive technology.
For readers who want a deeper comparison of the four methods, including when each one wins, the pick-the-right-approach guide walks through the same decision tree with examples. The MDN CSS backgrounds and borders guide and the CSS Backgrounds and Borders Level 3 specification document the underlying border properties, longhand widths, styles, and colors that every border-based triangle relies on.