A CSS triangle generator is a focused browser tool that paints a solid triangle using only CSS borders, with no SVG, image file, canvas, or pseudo-element library. The shape comes from a single element whose content width and content height are both zero, where two transparent borders draw the two sloping sides and one colored border points in the chosen direction. The generator accepts four inputs: direction (up, down, left, or right), width, height, and a six-digit HEX color, and immediately exposes a live preview together with synchronized CSS and HTML in the same view. Generation and copying happen entirely in the current browser tab, with no upload, account, or server rendering. To begin, open the CSS Triangle Generator, choose a direction and size, set a HEX color, eyeball the preview at the approximate size and background where it will sit, and copy both CSS and HTML into your project. The live preview uses the same derived border declarations shown in the CSS output, so what you see in the tool is what you ship.
How the CSS Border Triangle Works
CSS borders meet at corners with a 45-degree seam by default. When a div has content width and content height set to zero, the four borders still render and overlap, and each border takes on a triangular shape in the corner it occupies. Leaving three borders transparent and coloring the fourth produces a single solid triangle that points opposite the colored border.
The CSS Triangle Generator wraps that mechanism in a form. You choose a direction, and the tool writes each border longhand so the geometry stays visible and easy to audit. Up uses transparent left and right borders plus a colored bottom border; down uses a colored top border; left uses transparent top and bottom borders plus a colored right border; right uses a colored left border. The colored border always equals the assumed pointing dimension, while the two transparent borders on the perpendicular sides add up to the assumed base. Knowing this mapping is what turns the tool from a black box into something you can predict, edit, and trust when you paste it into a real stylesheet.
Your First Triangle in Three Steps
- Choose the direction, width, height, and six-digit HEX color. Pick up, down, left, or right for the direction. Enter whole pixel values for width and height, and type the color as a hash followed by six hexadecimal digits, for example #1f6feb. The page updates the preview as soon as each control changes.
- Inspect the live result at the approximate size and background where it will be used. The preview renders against the page background, so if your real component sits on a dark panel or beside text, check the triangle there too. You can adjust dimensions or color and watch the shape re-paint in place.
- Copy both CSS and HTML, then preserve or replace the decorative accessibility treatment as appropriate. The Copy CSS and Copy HTML buttons request permission independently, and a successful status names the copied format. If your browser denies clipboard access, both code blocks stay visible for manual selection, and the page does not falsely report success. After pasting, rename the generated class if it would clash with an existing stylesheet, and update both outputs together.
Direction, Size, and Color: What Each Control Means
| Direction | Colored border | Transparent borders | Colored value equals | Transparent pair equals |
|---|---|---|---|---|
| Up | bottom | left, right | selected height | selected width |
| Down | top | left, right | selected height | selected width |
| Left | right | top, bottom | selected width | selected height |
| Right | left | top, bottom | selected width | selected height |
Width and height accept whole values from ten through three hundred pixels. The color input is normalized to lowercase and must be a hash followed by six hexadecimal digits; alpha colors, CSS variables, gradients, currentColor, wide-gamut syntax, and theme tokens are not generated by this focused tool. Even dimensions split the two transparent borders equally. Odd dimensions use floor and ceiling values, such as twenty and twenty-one pixels for a forty-one-pixel base, because Chromium can quantize two 20.5-pixel borders down to twenty pixels each. That asymmetry preserves the requested total painted dimension instead of silently losing a pixel, though rasterization can still vary with zoom and device pixel ratio.
Reading the Synchronized CSS and HTML
| Output | Contents | Why it matters |
|---|---|---|
| CSS | Explicit longhand border widths, styles, and colors for all four sides, plus width:0 and height:0 | Every dimension that paints the shape is visible; you can audit or hand-edit any side without re-deriving math |
| HTML | One div with the generated class and aria-hidden="true" | Hides the shape from assistive technology; safe only when the triangle carries no meaning |
The implementation writes each border as a longhand declaration, so the geometry stays transparent in the CSS output. Even dimensions split the two transparent sides evenly; odd dimensions use floor and ceiling so the rendered base matches the requested total. The HTML snippet contains no script, event handler, inline image, remote request, or dependency. If your project already uses a class called lizely-triangle, rename it in both the CSS and HTML blocks before pasting. The browser controls constrain ordinary input, while the pure generator independently rejects unsupported directions, malformed colors, decimals, and values outside the stated range rather than quietly clamping or emitting partial code.
Accessibility, Theming, and a Quick Sanity Check
The HTML snippet sets aria-hidden="true", which is appropriate for a purely visual triangle such as an arrow that points at content, a separator between sections, or a tooltip indicator. If the shape communicates state, direction, validation, navigation, or any other meaning, 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. A triangle used next to text should be checked in light and dark themes rather than assumed to inherit sufficient contrast, since the HEX color is painted as an opaque border.
After copying, replacing the literal color with a trusted design token can improve theming, but verify that the target syntax is supported and that the transparent side borders remain transparent. Test the final result at two hundred percent zoom, with high contrast or forced colors enabled, and at common mobile widths. The preview confirms border geometry, not the complete accessibility or layout behavior of a destination component. Layout, transforms, hit testing, outlines, overflow, and alignment can be less intuitive than an SVG with an explicit viewBox, because the element's measurable content box is zero while its painted borders occupy area. 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.
Where to Go After Your First Triangle
Once you have a working triangle, the next decisions are usually about placement and editing rather than first-time setup. For a deeper walk through the same controls, see the width and height guide. To understand why the empty content box produces a triangle, the zero-size trick explainer walks through the border mechanics in plain prose. If you need a rounded tip, curved edge, hollow shape, gradient fill, stroke, or arbitrary polygon, the border approach cannot produce it; use SVG or clip-path and verify browser support in your target environment, as documented in the MDN CSS backgrounds and borders guide and the W3C CSS Backgrounds and Borders Level 3 specification.