A CSS ::after triangle is a solid shape drawn by transparent and colored borders on a zero-size element, and the CSS Triangle Generator emits the exact longhand border declarations, dimensions, and HTML for up, down, left, or right triangles. The technique works because two transparent borders form the sloping sides, the third border points in the chosen direction, and the element's content width and height are both zero. The generator synchronizes the CSS and HTML so the preview you see matches the code you copy, and it validates input strictly: integer dimensions from 10 through 300 pixels and a six-digit HEX color. If the search intent is a CSS after triangle generator that produces no SVG, no canvas, no image file, and no pseudo-element library, this is the focused tool for that job. Everything happens in the current browser tab, with no upload, account, or server rendering, and the snippet contains no script, event handler, or remote request.
What the CSS Triangle Generator Produces
The CSS Triangle Generator creates a simple solid triangle using border-color and zero content dimensions, and the page exposes a live preview alongside two synchronized code blocks. Choose up, down, left, or right for direction; set the visible width and height; and pick a six-digit HEX color. The output is written as longhand border declarations so the geometry remains visible and auditable, rather than collapsed into a single border shortcut. The HTML snippet contains one div with the generated class and aria-hidden true, which is appropriate for a decorative arrow or separator that conveys no information. If the shape communicates state, direction, validation, or navigation, 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.
How to Generate and Copy the Triangle
Open the generator, adjust the four inputs, and decide how the shape will integrate into the destination component.
- Choose the triangle direction, width, height, and six-digit HEX color using the on-page controls.
- Inspect the live result at the approximate size and background where it will be used, so the preview matches the destination color and spacing.
- Copy both CSS and HTML, then preserve or replace the decorative accessibility treatment as appropriate for the surrounding component.
Border Direction Rules and Geometry
For a vertical triangle (up or down), the two transparent side borders add up to the selected width and the colored border equals the selected height. For a horizontal triangle (left or right), the transparent top and bottom borders add up to the selected height and the colored border equals the selected width. Even dimensions split the perpendicular base equally between the two transparent borders; 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, so the one-pixel asymmetry preserves the requested painted total. Rasterization can still vary with zoom and device pixel ratio, so verify the final size at the target viewport.
| Direction | Colored border | Transparent borders | Geometry role |
|---|---|---|---|
| Up | bottom | left, right | vertical, colored border equals selected height |
| Down | top | left, right | vertical, colored border equals selected height |
| Left | right | top, bottom | horizontal, colored border equals selected width |
| Right | left | top, bottom | horizontal, colored border equals selected width |
Apply the Generated CSS to a ::after Pseudo-Element
The generated CSS describes a single div with the longhand border declarations, but the same rules move directly into a ::after pseudo-element on any container. Take the CSS Triangle Generator output, copy the border declarations into a .parent::after { ... } rule in your stylesheet, and the shape will inherit the container's position stack. Set position: relative on the parent if the triangle needs to anchor against it, and set position: absolute plus any offsets on the ::after to align the tip. Because the element's content box is zero, the painted borders define the actual footprint, so layout, transforms, hit testing, and outlines can be less intuitive than an SVG with an explicit viewBox. Rename lizely-triangle if that class would conflict with an existing stylesheet, and update both the CSS and HTML outputs together.
Limits of Border Triangles vs SVG and clip-path
A border triangle is compact but limited in shape. It cannot directly create a rounded tip, a curved edge, a hollow shape, a gradient fill, a stroke, a complex shadow, or an arbitrary polygon, because the painted region is the intersection of straight border edges. 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, so alpha colors, CSS variables, gradients, currentColor, and wide-gamut syntax 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 the transparent side borders remain transparent. 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.
Accessibility, Contrast, and Theming
The HTML snippet contains aria-hidden true because a decorative arrow or separator conveys no information on its own, and that accessibility choice is appropriate for purely visual shapes. 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. For form controls that combine a triangle with a checkbox or toggle, follow the patterns in this guide on making a checkbox in CSS the right way. A triangle used next to text should be checked in light and dark themes rather than assumed to inherit sufficient contrast, since the painted border is fully opaque. Test the final result at 200 percent zoom, in high contrast mode, with forced colors enabled, and at common mobile widths. The MDN CSS backgrounds and borders guide documents the border properties and transparent color behavior that the generator relies on, while the W3C CSS Backgrounds and Borders specification defines the longhand widths, styles, and colors used here.