A CSS border triangle is the right choice when you need a small, solid, straight-edged pointer with no curves, gradients, or hollow shapes, and when the shape carries no information for assistive technology. The technique paints an element that has zero content width and zero content height, then uses three borders — two transparent and one colored — to draw the visible shape. That geometry is fast to render, dependency-free, and easy to copy into any stylesheet, which is exactly why so many UI patterns reach for it.
The decision you are actually making is not "should I draw a triangle?" but "is a border-drawn triangle the most honest tool for this specific job?" Some needs match the technique perfectly: an arrow that points to a tooltip, a chevron that decorates a menu, a small accent under a card. Other needs look like a triangle on the surface but break the technique: a rounded tip, an outlined shape, a hollow frame, a gradient fill, or any triangle that must communicate meaning to a screen reader. The CSS Triangle Generator is built around the four-direction, solid-color, decorative case — which is exactly the sweet spot where the border trick beats every alternative.
What a Border Triangle Actually Is (and Is Not)
The CSS Triangle Generator produces one thing: a solid, straight-edged triangle whose painted area comes entirely from borders on a zero-size element. Pick a direction — up, down, left, or right — and the generator assigns the full pointing dimension to one colored border, while the two side borders become transparent and add up to the base. An upward triangle, for example, uses transparent left and right borders plus a colored bottom border. A right-pointing triangle uses a colored left border with transparent top and bottom borders. The element itself reports zero width and zero height to layout.
What it is not is equally important. A border triangle cannot directly create a rounded tip, a curved edge, a hollow shape, a gradient fill, a stroke, a complex shadow, or any polygon beyond a single right-angle pair. It does not consume alpha colors, CSS variables, gradients, or currentColor. The painted HEX is opaque. If your design needs any of those properties, you are looking at the wrong technique, and you should plan for SVG or clip-path from the start.
The implementation in the CSS Triangle Generator writes every border longhand explicitly — border-top, border-right, border-bottom, border-left — so the geometry stays auditable when you read the output. That decision is deliberate: longhand makes it obvious which border carries color and which borders stay transparent, instead of hiding the trick behind a shorthand like border: 1px solid.
When a CSS Triangle Is the Right Fit
Use the table below as your working screen before you generate a border. If your job falls in the left column, the CSS Triangle Generator is the cheapest correct solution. If it falls in the right column, switch tools before you start.
| Use a border triangle | Use SVG or clip-path instead |
|---|---|
| Solid up, down, left, or right arrow between 10 and 300 pixels | Diagonal directions or arbitrary polygon corners |
| Decorative tooltip pointer that conveys no meaning | Triangle that communicates state, direction, or validation |
| Small chevron, separator, or accent with one solid HEX color | Rounded tip, curved edge, or hollow outline |
| Zero-dependency markup that survives old browsers | Gradient fill, drop shadow, or stroke |
| Color set by a literal hex code you control | Color from currentColor, CSS variables, or alpha channels |
Border triangles also stay cheap when they sit next to interactive controls. The technique paints into the element's border box, not its content box, which means the painted shape can extend into the area layout would otherwise reserve for padding. Check that visually before you assume the surrounding spacing is unaffected.
If your project theming expects the triangle to inherit from a CSS variable or to switch on dark mode, treat that as a signal to read the color-decision guide at /color/guides/how-to-choose-color-when-using-a-css-triangle-generator/, because the generator only emits a literal hex and does not produce variable references.
When You Should Reach for SVG or Clip-Path Instead
The moments that push you out of the border-triangle sweet spot are usually visual, not technical. A rounded tip is the classic example: there is no border property that rounds the meeting of two transparent borders, so a "soft arrow" cannot come from a zero-size element. A hollow or stroked triangle falls into the same trap — the borders are either fully painted or fully transparent, with no middle ground. A gradient fill, a wide-gamut color, or an alpha-blended color also sit outside the technique because the colored border is painted opaque.
SVG and clip-path solve those cases with explicit geometry. SVG gives you a real viewBox, real curves, and a path you can fill or stroke. Clip-path polygon() lets you keep markup as a single element with arbitrary angles and zero image file. Both options handle accessibility differently from a border triangle: they can carry a real <title> or aria-label when the shape communicates meaning.
Layout and hit testing are the second reason to switch. A border triangle's measurable content box is zero, so transforms, outlines, overflow, and alignment can behave less intuitively than an SVG icon with an explicit bounding box. If you need pixel-perfect alignment with surrounding text, test the final shape at 200 percent zoom, on a high-DPI display, and in forced-colors mode before you commit. The MDN guide on backgrounds and borders documents the longhand border properties the technique relies on, and the W3C CSS Backgrounds and Borders Level 3 specification defines exactly how transparent and colored borders combine.
Generate the Triangle With the CSS Triangle Generator
Open the CSS Triangle Generator and follow these steps.
- Choose a direction from up, down, left, or right. The direction decides which border carries color and which two borders stay transparent.
- Enter a width and a height as whole numbers between 10 and 300 pixels. The generator uses your width and height as the visible painted dimensions of the triangle, not as the element's content box.
- Enter a six-digit HEX color in the form #RRGGBB. The input is normalized to lowercase, so you can paste uppercase and the output stays consistent.
- Inspect the live preview on a background close to the one where the triangle will sit. The preview uses the same border declarations the generator copies, so what you see is what you ship.
- Read the synchronized CSS and HTML blocks. The CSS sets each border longhand explicitly; the HTML contains a single div with the generated class and aria-hidden="true".
- Copy CSS and Copy HTML request clipboard permission separately. If the browser denies clipboard access, both code blocks stay on the page for manual selection, and no false success message appears.
- Decide whether aria-hidden fits the destination. The snippet is appropriate for a decorative arrow or separator. If the triangle communicates state, validation, navigation, or any other meaning, add accessible text or labeling to the surrounding interactive control instead of relying on the silent snippet.
- If the generated class name lizely-triangle would collide with an existing stylesheet, rename it in both the CSS and HTML blocks together so the two outputs stay in sync.
The generator uses an exact-output rule for odd dimensions. If you ask for a 41-pixel base, it splits that base into one 20-pixel transparent border and one 21-pixel transparent border. That asymmetry prevents Chromium from quantizing two 20.5-pixel borders down to 20 pixels each and silently shrinking the painted triangle by a pixel. Even dimensions split equally. The result is that the requested total painted dimension is preserved on screen.
Accessibility and Visual Testing Before You Ship
A border triangle is decorative by default, and the generator marks its HTML snippet aria-hidden="true" to match. That choice is correct for a tooltip pointer, a chevron next to a menu label, or a separator that carries no meaning. It is wrong the moment the shape communicates anything a sighted user would understand. If the triangle indicates which option is selected, which direction a sortable column is sorted, whether a form field is valid, or which accordion row is expanded, the silent snippet loses that meaning for screen reader users. Add a visible text label, an aria-label on the surrounding button, or an sr-only span so the meaning survives the removal of the decorative shape.
Contrast is the second accessibility check. The generator paints an opaque HEX border, so the color you pick is the color the user sees, regardless of theme. Run a contrast check between the triangle's HEX and the background where it will sit, then repeat that check in a dark theme. A triangle that is visible on a white card can disappear on a dark card even when the surrounding text stays legible.
Test the final result at 200 percent zoom, in a high-contrast mode, in forced-colors mode, and on a common mobile width. The preview confirms the border geometry, not the full accessibility or layout behavior of the destination component. Rasterization can still vary with zoom and device pixel ratio, so a pixel you saw on a laptop may shift by one row of anti-aliasing on a phone.
Practical UI Roles for a Generated CSS Triangle
The technique earns its place in a handful of recurring UI patterns. A tooltip pointer that anchors a popover to a trigger button is the most common. The triangle points toward the trigger, sits just outside the popover's rounded box, and is painted in the same HEX as the popover's background so it reads as a continuous shape. A dropdown chevron next to a menu label is a close cousin — small, decorative, and pointed down to suggest that more options live below.
Other roles include a corner accent on a card, a small arrow inside a notification banner, and a separator that visually divides two sections of a page. Each of these is decorative, fits inside the 10 to 300 pixel range the generator accepts, and uses a single solid HEX color. Each of them is also small enough that the cost of a single SVG icon would outweigh the convenience of a border triangle.
If your triangle is meant to look hand-drawn, decorative in a different sense — say, a paper-folded edge on a card — you have stepped out of the border-triangle model. The border cannot produce a fold, and the generator does not emit pseudo-element markup for layered effects. For that work, generate the shape with SVG or with a clip-path polygon, and treat the border triangle as the wrong starting point from the beginning.
For a deeper look, see CMYK Color Codes and Their CSS Named Color Equivalents.
For a deeper look, see Troubleshoot Problems When You Generate a CSS Cubic Bezier.