Skip to content
Lizely

CSS Triangle Generator

Generate a precise four-direction CSS border triangle and copy synchronized CSS and HTML.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose the triangle direction, width, height, and six-digit HEX color.
  2. 2.Inspect the live result at the approximate size and background where it will be used.
  3. 3.Copy both CSS and HTML, then preserve or replace the decorative accessibility treatment as appropriate.

About CSS Triangle Generator

CSS Triangle Generator creates a simple solid triangle without SVG, canvas, an image file, or a pseudo-element library. Choose up, down, left, or right; set the visible width and height; then choose a six-digit HEX color. The page immediately updates a real CSS preview and exposes synchronized CSS and HTML. Generation and copying happen entirely in the current browser tab, with no upload, account, server rendering, or saved design state.

The technique starts with an element whose content width and height are both zero. Transparent borders form the two sloping sides, while one colored border points in the selected direction. An upward triangle 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, while right uses a colored left border. The implementation writes each longhand explicitly so the geometry remains visible and auditable.

For vertical triangles, the two transparent side borders add up to the selected width and the colored border equals the selected height. For horizontal triangles, the transparent top and bottom borders add up to the selected height and the colored border equals the selected width. Even dimensions split equally. Odd dimensions use floor and ceiling values, such as 20px and 21px for a 41px base, because Chromium can quantize two 20.5px borders down to 20px each. The one-pixel asymmetry preserves the requested total painted dimension instead of silently losing a pixel. Rasterization can still vary with zoom and device pixel ratio.

Width and height accept whole values from ten through three hundred pixels. Color must be exactly a hash plus six hexadecimal digits and is normalized to lowercase. The browser controls constrain ordinary input, while 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.

The live preview uses the same derived border declarations shown in the CSS output. The HTML snippet contains one div with the generated class and aria-hidden true. That accessibility choice is appropriate for a decorative arrow or separator that conveys no information. If the triangle communicates state, direction, validation, navigation, or another meaning, do not rely on this silent snippet alone. Add visible text or an accessible label to the surrounding interactive control, and keep the decorative triangle hidden from assistive technology.

Copy CSS and Copy HTML request clipboard permission separately. A successful status names the copied format. If browser policy denies clipboard access, both code blocks remain visible for manual selection and the page does not falsely report success. The snippet contains no script, event handler, inline image, remote request, or dependency. Rename lizely-triangle if that class would conflict with an existing stylesheet, and update both outputs together.

Border triangles are compact but have limitations. The element's measurable content box is zero, while its painted borders occupy space. Layout, transforms, hit testing, outlines, overflow, and alignment can therefore be less intuitive than an SVG with an explicit viewBox. A border triangle cannot directly create a rounded tip, curved edge, hollow shape, gradient fill, stroke, complex shadow, or arbitrary polygon. For those needs, use SVG or clip-path and test browser support in the intended environment.

The chosen HEX color is painted as an opaque border. Alpha colors, CSS variables, gradients, currentColor, wide-gamut syntax, and theme tokens are not generated by this focused tool. After copying, replacing the literal with a trusted design token can improve theming, but verify that the target syntax is supported and that transparent side borders remain transparent. A triangle used next to text should be checked in light and dark themes rather than assumed to inherit sufficient contrast.

Performance cost for one triangle is negligible, but hundreds of decorative elements can still increase DOM and paint work. Prefer one semantic control with a decorative shape over duplicated hidden controls. Test the final result at 200 percent zoom, high contrast, forced colors, and common mobile widths. The preview confirms the border geometry, not the complete accessibility or layout behavior of a destination component.

MDN's CSS backgrounds and borders guide documents border properties and transparent color behavior, while the CSS Backgrounds and Borders specification defines the longhand border widths, styles, and colors used here. The exact dimension limits and directional serialization are deliberately local product rules covered by four-direction, odd-dimension, exact-output, and boundary tests rather than claimed as a universal triangle standard.

Methodology & sources

Validate integer dimensions and strict HEX color, split the perpendicular base with floor and ceiling transparent borders so odd totals stay exact, assign the full pointing dimension to one colored border, and keep preview and copied code synchronized.

Frequently asked questions

Why does the element have zero width and height?
The visible shape is painted entirely by borders; two transparent borders form the slopes and one colored border points in the selected direction.
How does an odd base dimension stay exact?
The generator uses floor and ceiling border widths, such as 20px and 21px, so browser pixel quantization cannot shrink a requested 41px total.
Is aria-hidden always correct?
Only for a decorative triangle. If the shape communicates meaning or acts as a control, provide accessible text or labeling on the surrounding semantic element.
Can the generator make rounded or outlined triangles?
No. Border triangles are solid straight-edged shapes; use SVG or clip-path for curves, strokes, gradients, or more complex geometry.

Related tools

Color Tools guides

View all