A CSS triangle generator that targets rounded corners still relies on one fundamental rule: the visible shape is painted entirely by an element whose content width and height are both zero, using three of its borders. Two transparent borders meet at the diagonal slopes, and one colored border points in the chosen direction. Because every painted pixel belongs to a straight border line, the geometry cannot be curved, stroked, or hollowed without leaving the border trick behind. The CSS Triangle Generator accepts directions up, down, left, and right; dimensions between 10 and 300 pixels; and a six-digit HEX color normalized to lowercase, then exports synchronized CSS and HTML in the current browser tab with no upload, account, or saved state. The straight-edge rule isn't a setting you can switch off — it is the shape's structure. If you actually want a tip that curves or sides that bend, the honest answer is to switch to SVG with a path or to clip-path, then verify that the destination environment supports the chosen syntax.
What the Border-Trick Geometry Looks Like in Four Directions
The construction starts with a div whose content box measures 0 by 0. Borders around an empty box have no inner edge to butt against, so each side meets the next at a 45-degree corner and the four triangles formed by those corners fill the painted area. Pick a direction, and one border becomes the visible triangle while the two adjacent borders become transparent slopes. The colored border always carries the full pointing dimension, and the two transparent borders split the perpendicular base so their sum equals the requested value. Even values split in half with no asymmetry; odd values use floor and ceiling widths because Chromium can quantize a 20.5px border on both sides down to 20px, silently shrinking the painted base by one pixel. The implementation writes each longhand explicitly so the geometry stays visible and auditable.
| Direction | Colored border | Transparent borders | Colored side length |
|---|---|---|---|
| Up | Bottom | Left + right, sum = width | Equals height |
| Down | Top | Left + right, sum = width | Equals height |
| Left | Right | Top + bottom, sum = height | Equals width |
| Right | Left | Top + bottom, sum = height | Equals width |
Generate a Triangle in Four Quick Steps
- Pick the direction (up, down, left, or right) and enter whole width and height values between 10 and 300 pixels; the fields reject decimals and any value outside the stated range.
- Enter a six-digit HEX color in the format #RRGGBB; the input normalizes the value to lowercase and rejects anything that does not match the strict pattern, never silently clamping invalid entries.
- Inspect the live result on the test background where you intend to use the triangle, adjusting dimensions or color until the painted pixels look right, then read the synchronized CSS and HTML the page shows.
- Use the CSS Triangle Generator to copy the CSS and the HTML separately — each Copy request asks for clipboard permission on its own — paste both blocks together, and rename the lizely-triangle class only if it conflicts with an existing stylesheet rule. For a deeper walkthrough of the zero-size pattern, see the zero-size border triangle guide.
When Rounded Corners Has to Mean a Different Tool
Rounded tips and curved sides are not a feature the border technique exposes, because they are not part of the data the technique paints. Each visible pixel belongs to a single straight border segment, and neighboring borders meet at a hard 45-degree join with no curvature parameter. Asking the generator to round a tip is the same as asking border-width to draw a circle: the model is not there. The tool itself flags this honestly — border triangles cannot directly produce a rounded tip, curved edge, hollow shape, gradient fill, stroke, complex shadow, or arbitrary polygon. Pretty CSS rounded corners on rectangles use the border-radius property, but that property has no effect on the painted border triangles because their content box is empty.
This is where SVG and clip-path enter as the next two options. SVG can express a triangle with a curved apex using path commands, fill it with a linear or radial gradient, leave it hollow with a stroke, and stay crisp at any zoom because the file describes geometry rather than pixels. clip-path can carve a curved triangle out of a colored rectangle using one of the basic shape functions or by referencing an SVG path, with browser support varying by syntax. Both options need to be verified in the destination environment, because some user agents still treat clip-path as an experimental feature behind a vendor prefix.
Border Triangles, SVG, and clip-path Side by Side
| Use case | Border triangle | SVG path | clip-path |
|---|---|---|---|
| Directional arrow on tooltip or button | Yes | Yes | Yes |
| Rounded tip or curved side | No | Yes (path curves) | Yes (with path() function) |
| Hollow triangle — stroke only, no fill | No | Yes | Limited |
| Gradient fill | No | Yes | Depends on syntax |
| Stroke + complex shadow around the shape | No | Yes | Limited |
| Single straight-edge decorative chevron | Yes (lightest) | Yes (heavier markup) | Yes (heavier markup) |
| Performance cost for hundreds of repeated elements | Lowest | Higher DOM cost | Higher DOM cost |
How Odd Dimensions Stay Exact
There is one numeric detail worth showing because it quietly affects every odd value you set. Pick height = 41 and direction = up. The colored bottom border equals 41px. The two transparent side borders must add up to 41, but Chromium can quantize a 20.5px border on each side down to 20px, silently dropping your triangle to a 40px base and losing the requested pixel. The generator avoids that pixel loss by computing floor(41 / 2) = 20 and ceiling(41 / 2) = 21, then writing each longhand explicitly so the geometry is auditable.
The output for that exact choice resolves to border-left: 20px solid transparent; border-right: 21px solid transparent; border-bottom: 41px solid #ff8800; with 20 + 21 = 41 matching the requested total. Even dimensions split equally with no asymmetry, so this detail only matters when the chosen value is odd. Rasterization can still vary with browser zoom and device pixel ratio, so visual inspection at the destination zoom is the final test.
Accessibility, Theme Tokens, and the Copied Snippet
The copied HTML is a single div with the generated class and aria-hidden="true". For a decorative arrow, separator, or chevron that conveys no information, that is the right pattern — assistive technology should skip it, and the visible control carries the meaning. For a triangle that marks validation state, signals a required field, sits inside a button as the visible affordance, or communicates direction in a stepper, the snippet alone is not enough. Add accessible text, a visible label, or an aria-label on the surrounding semantic control, and let the decorative triangle stay hidden.
The copied CSS uses the exact literal HEX you entered. If your design system expects a CSS variable, currentColor, or a token such as var(--accent-500), replace the literal in the stylesheet, then verify that transparent borders remain transparent and that downstream themes still resolve the new value. Alpha colors, CSS variables, gradients, currentColor, wide-gamut syntax, and theme tokens are not generated by this focused tool; replacing the literal at the paste step is the supported hand-off point. If browser policy denies clipboard access, both code blocks remain visible on screen for manual selection, and the page does not falsely report a successful copy.
Verifying the Painted Result in the Real Design
The live preview confirms the border geometry — it does not, on its own, confirm how the triangle will look next to body text, inside a tooltip, on a button, or against a colored card. Rasterization varies with browser zoom and device pixel ratio, and a color that reads cleanly on white can wash out on a tinted background. The implementation writes each longhand border width explicitly so you can audit the geometry before pasting, but the visual acceptance test happens in the destination layout. Layout, transforms, hit testing, outlines, overflow, and alignment can all behave differently from an SVG with an explicit viewBox, so position the triangle in context before shipping.
Run the painted HEX through a contrast check against both the card background and the surrounding text color — a triangular accent rarely inherits enough contrast on its own. Test the final result at 200% zoom, in forced colors mode, in dark theme, and at common mobile widths. The underlying model for the technique is documented in the MDN CSS backgrounds and borders guide, which defines the longhand border widths, styles, and colors the generator writes explicitly.