A CSS triangle generator produces solid, straight-edged triangles only — rounded tips, curved edges, hollow centers, and stroke outlines are not part of its output. The tool builds the classic border trick inside the browser: an element whose width and height are both zero, two transparent borders forming the sloping sides, and one colored border that points in the chosen direction. Because every painted edge is a straight rectangular border, the resulting shape is always a flat-sided triangle whose hypotenuse meets the other two edges at sharp angles. There is no setting for border-radius on the painted edges, no parameter for a hollow center, and no stroke width control, because borders in CSS do not curve individual sides, leave a transparent interior, or draw themselves as an outline. If a rounded or outlined triangle is what you need, the same generator cannot be coerced into producing one; the workaround is to move to SVG or clip-path, which can carry paths, curves, fills, and strokes natively.
The border-trick generator does not refuse to add curves out of preference; the underlying CSS mechanism simply has no property that bends a single painted edge. The rest of this article walks through what the generator can and cannot render, why those limits come from the border model itself rather than from a missing toggle, the precise steps to produce a clean solid triangle when that is enough, and which alternative to reach for when it is not.
What the Generator Actually Renders
The CSS Triangle Generator constrains itself to one well-defined output: a four-direction, solid-color, straight-edged triangle whose only adjustable inputs are direction, width, height, and a six-digit HEX color. The page accepts up, down, left, and right as directions, integer dimensions from 10 through 300 pixels, and exactly one color expressed as a hash followed by six hexadecimal characters that are normalized to lowercase. The live result updates immediately from those controls, and the same border declarations drive both the on-page preview and the copied CSS output so the snippet you paste matches what you saw on screen.
The following table maps each input to the resulting geometry so the limits are visible at a glance.
| Input | Accepted values | Effect on the triangle |
|---|---|---|
| Direction | up, down, left, right | Chooses which border receives the color and which two stay transparent |
| Width | Integer 10–300 px | For up/down: base length (sum of two transparent side borders). For left/right: pointing edge length |
| Height | Integer 10–300 px | For up/down: pointing edge length (the colored border). For left/right: base height |
| Color | # + six hex digits, lowercase | Painted as an opaque border; no alpha, no gradient, no CSS variable, no currentColor |
Everything outside those four inputs — including border-radius on a single side, stroke widths, fill rules, gradient stops, theme tokens, wide-gamut color syntax, and arbitrary polygon points — is intentionally outside the generator's scope. The output is the same border geometry as the canonical CSS border-triangle technique documented in the MDN backgrounds and borders guide, with the longhand properties written out explicitly so each value stays auditable. The page exposes synchronized CSS and HTML, and generation plus copying happens entirely in the current browser tab with no upload, account, server rendering, or saved design state.
Why Border Geometry Cannot Curve or Stroke a Triangle
The reason curves and outlines are physically unreachable comes from how CSS borders are drawn. A border in CSS is a straight rectangular band along one edge of the element's box; it has a uniform thickness, a single solid color, and four sharp corners where it meets the adjacent borders. There is no CSS property that bends a single border edge into a curve, that hollows out the inside of a colored border to leave a stroke, or that draws a border with both an inner and outer edge. Even border-radius, which rounds element corners, applies to the element as a whole rather than to individual painted edges — and the border triangle starts with an element whose content width and height are zero, so there are no element corners to round in the first place.
The trick itself reinforces those limits. For an upward triangle, the generator sets border-left and border-right to transparent with widths that sum to the requested width, and border-bottom to the chosen color with a width equal to the requested height. The sloping edges you see are not actually sloped at all — they are two straight transparent borders meeting at the corner where they join the colored border, and the eye fills in the diagonal between them. For odd totals such as 41 px, the generator splits the perpendicular base into 20 px and 21 px so the painted base stays exact under browser quantization rather than silently losing a pixel; an even dimension like 40 px splits to 20 px and 20 px. The mathematical shape of the visible result is fixed by this construction; nothing about it admits curvature, stroke, or hollow fill.
The CSS Backgrounds and Borders specification defines the longhand border widths, styles, and colors used here, and MDN's backgrounds and borders guide documents transparent border behavior in detail. Both sources describe borders as straight opaque rectangles with no provision for individual edge curvature or stroke-style outlining, which is why a generator that relies on them cannot reach those effects. The W3C specification also makes the longhand property approach explicit, which is why the generator writes border-left, border-right, and border-bottom (or border-top, or border-left, or border-right) individually rather than collapsing them into a shorthand.
Generate a Solid CSS Triangle Step by Step
When a flat-sided solid triangle is enough — for a tooltip arrow, a callout pointer, a step indicator, a chevron-style accordion marker, or a decorative separator — the generator does the job in three short steps.
- Choose the triangle direction (up, down, left, or right) and set integer width and height values between 10 and 300 pixels. For an odd total on the perpendicular base, the generator splits it into floor and ceiling border widths automatically so the requested dimension is preserved; an even total like 40 px splits evenly into 20 px and 20 px.
- Enter a color in the form #RRGGBB using exactly six hexadecimal digits; the value is normalized to lowercase. Inspect the live preview at the approximate size and background where it will live, including both light and dark surfaces, before you copy anything.
- Copy both the CSS and the HTML. The HTML contains the generated class and aria-hidden="true", which is appropriate for a decorative arrow. If the triangle communicates state, direction, validation, navigation, or any other meaning, replace that with visible text or an accessible label on the surrounding semantic control. Rename the class lizely-triangle in both outputs together if it would collide with an existing stylesheet.
You can use the CSS Triangle Generator to follow these steps live and copy both outputs in one place. Copy CSS and Copy HTML request clipboard permission separately, so if your browser blocks clipboard access the code blocks remain visible for manual selection and the page does not falsely report success.
When SVG or Clip-Path Is the Better Choice
For any triangle that needs a rounded tip, a curved hypotenuse, a hollow interior, a stroke outline, a gradient fill, a drop shadow, an arbitrary polygon shape, or a real viewBox-driven layout, the border trick hits a wall and the right move is to switch tools. SVG can express every one of those features natively — its path data supports curves through commands like Q and C, strokes through stroke-width and stroke-linejoin, and gradients through linearGradient and radialGradient definitions. clip-path with a polygon() value can mask an element to any straight-edged shape and works well for simple cases, though it cannot curve edges either, so any rounded triangle still needs SVG.
The trade-off is complexity. A border triangle is a single zero-size div with three border declarations; an SVG triangle is a markup element with a path or polygon, a viewBox for predictable scaling, and explicit handling for accessibility attributes such as role and aria-label when the shape conveys meaning. A clip-path triangle needs a host element with content and a clipping polygon sized to match the visible region. Each approach costs more to set up and audit than the border trick, but each is also the only realistic way to reach the visual result the keyword in this article is asking about. The preview in the border-triangle generator confirms the border geometry, not the complete accessibility or layout behavior of a destination component, so for any non-trivial shape the right test happens after you have chosen the right tool.
Accessibility and Visual Verification
The HTML snippet shipped by the generator places aria-hidden="true" on the single div, which removes the shape from the accessibility tree. That choice is correct for purely decorative triangles — an arrow that points at a tooltip whose meaning is already carried by the tooltip's visible label, a chevron inside a heading that does not carry information on its own, or a separator between two visually distinct blocks. It is the wrong choice the moment the triangle communicates state, direction, or interactivity, such as a dropdown indicator whose open or closed status is conveyed only by the arrow, a form validation marker, or a navigation control that uses the triangle as its only visual cue. In those cases the surrounding semantic element — a button, a link, or a labelled region — needs visible text, an accessible name, or both, while the decorative triangle remains hidden from assistive technology.
A second verification step is visual rather than structural. The painted HEX color is opaque, so it does not inherit a theme variable and will not adapt to a dark mode by itself; after copying, replacing the literal with a trusted design token can improve theming, but the target syntax must be supported and the transparent side borders must remain transparent. Test the final result at 200 percent zoom, under forced colors, and at common mobile widths so the rasterized triangle stays crisp and readable on the surfaces where it will be used. The performance cost for one triangle is negligible, but hundreds of decorative elements can still increase DOM and paint work, so prefer one semantic control with a decorative shape over duplicated hidden controls rather than reaching for this generator to stamp out shapes in a loop.