A CSS triangle generator with border builds a solid triangle from a zero-size element using three border declarations — two transparent borders that paint the slopes and one colored border that points in the chosen direction. Width and height accept integer values from 10 through 300 pixels, the color must be a hash plus exactly six hexadecimal digits in lowercase, and the direction is limited to up, down, left, or right. The element's content box is collapsed to zero so the visible shape comes entirely from painted borders, which is why the same trick scales from a small inline arrow to a large hero divider without changing the markup. The output is synchronized CSS and HTML that you can copy separately, the preview re-renders as you adjust any input, and every longhand border property is written explicitly so the geometry stays auditable after you paste the code into your stylesheet.
The 3-Border Triangle Recipe Explained
The border-triangle technique is sometimes called the zero-size trick because the underlying element has width: 0 and height: 0 in CSS. With no content box, the painted borders meet at a point and form a triangle. Two of those borders are set to transparent so only their painted thickness contributes to the visible silhouette, and the third border takes the requested HEX color so the triangle points in a predictable direction.
This approach is appealing because it requires no SVG, no canvas, no raster image file, and no pseudo-element library — a single div with five or six longhand border declarations does the work. Because the visible shape is just three painted rectangles meeting at the center, the technique renders consistently across modern browsers. It also keeps the markup lightweight: one element, one class, and a copy-paste snippet.
For the colored side, the chosen HEX is painted as an opaque border. Alpha channels, CSS variables, gradients, currentColor, wide-gamut syntax, and theme tokens are not generated by this focused generator. If you need themable color, replace the literal with a design token after copying, but verify the token syntax is supported in your target environment and keep the two transparent sides transparent.
Direction-to-Border Mapping
Each direction tells the generator which border is the colored pointing edge and which two borders stay transparent. The table below summarizes how the four supported directions map to the longhand border declarations.
| Direction | Colored Border | Transparent Borders | Orientation |
|---|---|---|---|
| Up | border-bottom | border-left, border-right | Vertical — points up |
| Down | border-top | border-left, border-right | Vertical — points down |
| Left | border-right | border-top, border-bottom | Horizontal — points left |
| Right | border-left | border-top, border-bottom | Horizontal — points right |
For vertical triangles (up, down), the two transparent side borders add up to the selected width and the colored border equals the selected height. For horizontal triangles (left, right), the transparent top and bottom borders add up to the selected height and the colored border equals the selected width. Even dimensions split cleanly across both sides; odd totals use floor and ceiling to keep the painted base exact.
Generate a CSS Triangle With Border
The workflow for producing a production-ready border triangle is short because the CSS Triangle Generator handles geometry, validation, and synchronized output for you.
- Pick the direction — up, down, left, or right — from the available options. Each direction pins the colored border to a specific side and keeps the other two transparent.
- Enter integer width and height values between 10 and 300 pixels. Decimals and values outside that range are rejected by the page rather than silently clamped.
- Type a six-digit HEX color prefixed with a hash, for example #ff8800. The browser controls constrain ordinary input to that format, while the pure generator independently rejects malformed colors and emits no partial code on bad input.
- Inspect the live preview at the approximate size and background where the triangle will be used. The preview uses the same derived border declarations shown in the CSS output, so what you see is what gets exported.
- Click Copy CSS to copy the synchronized styles, then click Copy HTML to copy the matching snippet. The two clipboard requests are separate, and each successful copy names the format that was placed on the clipboard.
- If browser policy denies clipboard access, both code blocks remain visible for manual selection — the page does not falsely report a successful copy.
- Paste the CSS into your stylesheet and the HTML where the triangle belongs. Rename the .lizely-triangle class if it would collide with an existing rule, and update both outputs together so the class still matches.
- Decide whether the triangle is purely decorative, in which case keep aria-hidden="true", or carries meaning, in which case add visible text or an accessible label on the surrounding semantic element.
Odd Dimensions and Browser Pixel Quantization
The arithmetic at the heart of a border triangle is simple in the even case: a 100-pixel-wide base becomes 50 px on the left transparent border and 50 px on the right transparent border. When the requested total is odd, however, Chromium can quantize two 20.5 px borders down to 20 px each, silently shrinking the painted base by one pixel.
To prevent that, the generator splits odd totals using floor and ceiling. The arithmetic is straightforward: for a 41 px base, floor(41 / 2) = 20 and ceiling(41 / 2) = 21. The CSS then sets border-left: 20 px solid transparent and border-right: 21 px solid transparent, giving 20 + 21 = 41 — the exact painted dimension you asked for. The one-pixel asymmetry preserves the requested total instead of silently losing a pixel to browser rounding.
Rasterization can still vary with browser zoom level and device pixel ratio, so the preview confirms border geometry rather than guaranteeing a pixel-perfect render at every zoom step. Test the final shape in the destination layout at common viewport widths before shipping.
What Border Triangles Cannot Do
Border triangles are compact but have hard limits. The element's measurable content box is zero while its painted borders occupy space, which makes layout, transforms, hit testing, outlines, overflow, and alignment less intuitive than an SVG with an explicit viewBox. A border triangle cannot directly produce a rounded tip, a curved edge, a hollow shape, a gradient fill, a stroke, a complex shadow, or an arbitrary polygon. The painted border is also an opaque color, so alpha transparency has to be achieved by changing the background of the destination rather than the triangle itself.
For curves, gradients, hollow centers, drop shadows, or arbitrary polygon geometry, reach for SVG or clip-path and confirm browser support in your intended environment. MDN's CSS backgrounds and borders guide documents the longhand border properties and transparent color behavior that the generator relies on, and the W3C CSS Backgrounds and Borders Level 3 specification defines the underlying border-width, border-style, and border-color behavior.
For deeper reading on the underlying technique, the CSS Create Triangle With Border guide walks through the same zero-size trick in more detail.
Accessibility, Theming, and Real-Layout Testing
The HTML snippet exported by the generator wraps the colored border in a single div with aria-hidden="true" because a purely decorative arrow or separator carries no information. If the triangle communicates state, direction, validation, navigation, or another 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 shape hidden from assistive technology.
For theming, the chosen HEX is painted as an opaque border, so dark-mode contrast is not automatic. Test the triangle against both light and dark backgrounds rather than assuming sufficient contrast, and use a dedicated color contrast checker if the shape sits next to text. The performance cost of a single border 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.
Finally, test the final result at 200 percent zoom, with high contrast and forced colors enabled, and at common mobile widths. The preview confirms the border geometry but not the complete accessibility or layout behavior of the destination component, so end-to-end testing still belongs in the page where the triangle will live.