The CSS Triangle Generator returns the exact same CSS and HTML whenever you re-enter the same direction, width, height, and six-digit HEX color, because the entire pipeline runs locally in your browser with no saved state, no remote account, and no hidden server step that could drift between runs. A triangle in this tool is fully defined by those four inputs: the pointing direction (up, down, left, or right), the visible width, the visible height, and a strict six-digit hexadecimal color written in lowercase. As long as those four values match what you used the first time, the longhand border declarations, the lizely-triangle class, and the synchronized CSS and HTML blocks come from the same local generation, so the result reproduces in the current browser tab. Two practical details still affect pixel-perfect repetition: odd dimension totals split into floor and ceiling pixel values, and zoom level or device pixel ratio can shift how the same CSS rasterizes on screen. Treat the four inputs as your source of truth, and the generated triangle is reliably repeatable.
The Four Inputs That Lock In the Output
The CSS Triangle Generator accepts a small, strict set of inputs, and that strictness is exactly what makes the output repeatable. Outside those inputs the tool either rejects the value or has nothing left to vary, so the CSS and HTML you copy cannot silently change between runs.
Direction is the first input and it accepts exactly one of four values: up, down, left, or right. Width and height accept whole numbers from 10 through 300 pixels. Decimals, negatives, and values outside the range are not accepted by the browser controls and are independently rejected by the pure generator, which never clamps invalid programmatic input or emits partial code. Color must be a hash followed by six hexadecimal digits, such as #1a73e8, and the value is normalized to lowercase before it reaches the output blocks.
These four fields are the only variables in the entire pipeline. The class name, the structure of the snippet, and the longhand border declarations are all derived directly from those four inputs, so the same four inputs always yield the same snippet.
Repeat the Same Result Step by Step
- Open the CSS Triangle Generator in a fresh tab so nothing in the page is left in an unexpected state from a previous session.
- Choose the same direction you used before: up, down, left, or right. The direction sets which single border is colored and which two borders stay transparent.
- Enter the same width and the same height as whole numbers between 10 and 300. Match the previous values character for character, including the absence of units in the field.
- Type the same six-digit HEX color in the form #RRGGBB. Keep the leading hash and use lowercase digits; the tool normalizes case, but matching the case you used last time keeps the comparison trivial.
- Use the Copy CSS and Copy HTML buttons separately and keep the two blocks together. The HTML snippet carries the lizely-triangle class that the CSS targets, and dropping either half breaks the synchronized output.
Direction to Border Mapping
Each direction is a deterministic recipe. The direction guide for the CSS Triangle Generator walks through the visual difference between the four pointing options, and the W3C CSS Backgrounds and Borders Level 3 specification documents the longhand border properties that the recipe uses.
| Direction | Colored border | Transparent borders | Geometry of the painted shape |
|---|---|---|---|
| Up | Bottom | Left, Right | Vertex points up, base sits on the colored border |
| Down | Top | Left, Right | Vertex points down, base sits on the colored border |
| Left | Right | Top, Bottom | Vertex points left, base sits on the colored border |
| Right | Left | Top, Bottom | Vertex points right, base sits on the colored border |
How Dimensions Split Across Borders
Repetition works because the same integer dimensions always produce the same border widths, with one rule that catches a lot of people off guard. For an up or down triangle, the two transparent side borders add up to the width you entered, and the single colored border equals the height. For a left or right triangle, the two transparent top and bottom borders add up to the height, and the colored border equals the width. Even totals split in half. Odd totals split into a floor and a ceiling value so the requested total is preserved instead of silently lost to browser pixel quantization.
Worked example: a 41-pixel base. floor(41 / 2) = 20 and ceiling(41 / 2) = 21, so the two transparent side borders are written as 20px and 21px. 20 + 21 = 41px. The same numbers come out every time you re-enter 41 because the split is a deterministic function of the input, not a measurement taken from a rendered canvas. The width and height guide shows how those values flow into the border declaration.
| Triangle orientation | How dimensions split |
|---|---|
| Up or down (vertical) | Two transparent side borders add up to width; colored border equals height |
| Left or right (horizontal) | Two transparent top and bottom borders add up to height; colored border equals width |
| Even total | Split exactly in half, e.g. 50px and 50px for a 100px base |
| Odd total | Floor and ceiling, e.g. 20px and 21px for a 41px base, to defeat browser pixel quantization |
Why the Same Inputs Cannot Drift
The generator has no saved design state, no upload, and no server rendering. The same logic that paints the live preview also writes the CSS and HTML output, so the preview and the code are produced by the same derived border declarations rather than two parallel paths. A successful copy status names the copied format, and if the browser denies clipboard permission the two code blocks remain visible for manual selection, so you can still retrieve the same bytes that would have been placed on the clipboard.
The pure generator independently rejects unsupported directions, malformed colors, decimals, and values outside the stated range. It does not quietly clamp invalid programmatic input or emit partial code, so the output you copy on a successful run is the complete output for those four inputs, no matter how many times you repeat the process or which browser tab you do it in.
Color, Class Name, and Token Replacement
Color is normalized to lowercase before it reaches the output, so #1A73E8 and #1a73e8 always become the same lowercase token in the copied CSS. If you later replace the literal with a design token such as a CSS variable, keep the transparent side borders transparent and verify the destination syntax supports tokens, because this focused tool only generates opaque HEX literals. Alpha colors, CSS variables, gradients, currentColor, wide-gamut syntax, and theme tokens are not generated by the tool, so a token swap is something you do after copying. The MDN CSS backgrounds and borders guide documents the transparent keyword that the side borders rely on, which is the property to preserve when you swap a token in.
The class name is part of the output and is the link between the CSS and HTML blocks. If lizely-triangle would conflict with an existing stylesheet, rename it in both outputs together; leaving the class name in only one block silently breaks the triangle on the next render even when the rest of the snippet is correct.
What Can Change a Reproduced Result
Inputs are not the only thing that affects what shows up on screen. The same CSS can render with a slightly different painted size at different browser zoom levels, and high device pixel ratios can shift how the borders are rasterized even when the integer values are identical. Forced colors and high contrast modes can override the painted color, so a triangle that needs to convey meaning should carry visible text or an accessible label rather than relying on the silent aria-hidden snippet alone.
If the triangle sits next to text, check it in both light and dark themes rather than assuming the chosen HEX carries enough contrast in both, and inspect the final component at 200 percent zoom and on common mobile widths. The preview in the tool confirms the border geometry, not the full accessibility or layout behavior of a destination component, so a true visual check still belongs in the real layout where the triangle will live.
For a deeper look, see How to Repeat an Average Color Result From an Image.