The CSS Triangle Generator lets you pick one of four directions — up, down, left, or right — and the tool assigns the colored border to whichever edge points where you want the triangle to face. Pick direction first, then the rest of the geometry falls into place: the colored border takes the full pointing dimension, the two perpendicular borders stay transparent to form the slopes, and the visible base equals the sum of those two transparent sides. Because each direction is just a different combination of one colored border and two transparent borders, you are really choosing which edge of an invisible zero-by-zero element should be painted. That single choice determines the entire shape, so getting it right before setting width and height saves you from rebuilding the snippet twice. The four options cover every common UI need where a border triangle is appropriate, from dropdown carets pointing down to tooltip arrows pointing up, and each direction is wired to a specific border in the generated CSS so the preview matches the code line for line.
How Direction Works in the Border Triangle Trick
The CSS Triangle Generator uses the classic zero-size border technique. The element being styled has both its content width and content height set to zero, so nothing is painted from the box itself. Instead, the four borders are drawn outward from that single center point and meet at right angles. If three of those borders are transparent and one is colored, only the colored one is visible, but the slopes it cuts are defined by the angles where the transparent borders meet it.
Direction is the single decision that decides which of the four borders receives the color:
- Up — colored bottom border, transparent left and right borders. The triangle sits on its flat base and points upward.
- Down — colored top border, transparent left and right borders. The triangle sits on its tip and points downward.
- Left — colored right border, transparent top and bottom borders. The triangle sits on its right edge and points left.
- Right — colored left border, transparent top and bottom borders. The triangle sits on its left edge and points right.
The longhand border properties are written out individually in the CSS, which keeps the geometry visible in the source rather than hiding it behind a shorthand. With those four combinations the entire directional vocabulary of the tool is covered. Diagonal, right-angled, hollow, rounded, and outlined triangles are out of scope, and the generator does not try to fake them — it simply does not expose those options.
Match the Direction to What the Triangle Should Do
Picking a direction is rarely an abstract decision. You usually start with a UI pattern that needs the triangle, and the pattern dictates the direction. Working backward from that keeps the choice simple.
| UI pattern | Direction | Why |
|---|---|---|
| Tooltip arrow above a popup | Up | The arrow points up into the tooltip and away from the trigger |
| Tooltip arrow below a popup | Down | The arrow points down at the trigger from above |
| Tooltip arrow on the left of a popup | Left | The arrow points left into the popup from the right |
| Tooltip arrow on the right of a popup | Right | The arrow points right into the popup from the left |
| Dropdown caret | Down | Signals that the menu expands below the control |
| Accordion chevron in collapsed state | Right | Indicates content will slide out to the right |
| Accordion chevron in expanded state | Down | Indicates content is open beneath the header |
| Speech bubble tail pointing at a speaker | Direction toward the speaker | The flat edge of the triangle rests on the bubble and the tip touches the speaker |
| Notification flag on a corner | Direction outward from the container | Reads as a tag or alert pointing away from the badge |
For a full walkthrough of how the four directions are written in CSS, see the four-direction recipe for the CSS Triangle Generator.
Choose a Direction in the CSS Triangle Generator
Once you know which way the triangle has to point, the generator walks you through the rest in the order the controls appear.
- Open the CSS Triangle Generator and decide which way the triangle needs to face in your layout.
- Pick the matching direction from the four options (up, down, left, or right). This sets which border is colored in the generated CSS.
- Enter the visible width and height in whole pixels between 10 and 300. The tool assigns those values to the right longhand borders automatically.
- Type a six-digit HEX color in the form #rrggbb. The generator normalizes the letters to lowercase and rejects anything that is not exactly a hash followed by six hex digits.
- Watch the live preview update on the same page. Check it against the approximate background color where the triangle will sit.
- Click Copy CSS, then Copy HTML. The two clipboard requests are separate, and the status line names whichever format was just copied. If the browser blocks clipboard access, both code blocks remain visible for manual selection.
- Rename the generated .lizely-triangle class if it would collide with an existing stylesheet, and update both the CSS and the HTML so they still match.
Direction does not change between the preview and the copied code. The same border that is colored on screen is the one painted in your stylesheet.
How Direction Interacts With Width and Height
Direction and dimensions are linked, so the choice you make in the direction menu changes how width and height are interpreted.
| Direction group | What width controls | What height controls | Colored border equals |
|---|---|---|---|
| Up / Down (vertical) | The sum of the two transparent side borders | The colored top or bottom border | The selected height |
| Left / Right (horizontal) | The colored left or right border | The sum of the two transparent top and bottom borders | The selected width |
For a vertical triangle the visible base is the painted width, and the painted height is the colored border itself. For a horizontal triangle the roles flip: the painted width is the colored side border, and the visible height is the sum of the transparent top and bottom borders.
When the relevant dimension is even, the generator splits it equally between the two transparent borders — a 60 by 40 upward triangle uses 30px on each transparent side and a 40px colored bottom. When it is odd, the tool uses floor and ceiling values instead of two equal halves, so a 41px base becomes 20px on one side and 21px on the other. Chromium can quantize two 20.5px borders down to 20px each, which would silently lose a pixel of painted width. The asymmetric split keeps the requested total exact.
The MDN CSS backgrounds and borders guide documents the transparent border behavior this trick relies on, and the CSS Backgrounds and Borders specification defines the longhand border widths, styles, and colors that the generator writes out.
Accessibility and Decorative Direction Choices
The HTML snippet shipped by the generator wraps the triangle in a single div with aria-hidden="true". That treatment is the right default for a decorative shape such as a tooltip tail, a dropdown caret, or a chevron that sits next to visible text describing the same state. Screen readers will skip it because it adds no information beyond what the surrounding label already communicates.
If the triangle is the only signal a user has — for example, a play icon, a validation marker, a required-field badge, or a directional control with no visible label — aria-hidden="true" is the wrong choice. In that case the triangle is no longer decorative; it is communicating state, and removing it from the accessibility tree breaks the experience for assistive technology. Add visible text or an accessible label to the surrounding interactive control, and keep the triangle decorative.
Direction also affects theme contrast. A triangle that reads well on a light background may vanish on a dark one. After you copy the snippet, replace the literal HEX with a design token from your design system if one exists, but check that the new syntax is supported and that the two transparent side borders stay transparent. Test the final component at 200 percent zoom, with high contrast enabled, in forced colors mode, and at common mobile widths before shipping.
When a Border Triangle Is the Wrong Shape for the Job
The border trick is a fast way to draw a flat, solid, straight-edged triangle, and the four directions cover most UI needs. It is not a general polygon tool. The painted shape is rigid: there is no way to round the tip, curve an edge, hollow out the center, add a stroke, fill with a gradient, or draw any other polygon shape. For any of those, switch to SVG with an explicit viewBox, or use the clip-path property, and verify browser support in your target environment.
Border triangles also behave differently from regular boxes at runtime. The element's measurable content box is zero, so layout, transforms, hit testing, outlines, overflow, and alignment can all behave in unintuitive ways compared with an SVG element. Performance cost for one triangle is negligible, but stacking hundreds of decorative triangles in a single view still adds DOM and paint work, and prefers one semantic control with a decorative shape over duplicated hidden controls.
The direction decision is the cleanest part of the workflow because there are only four choices and each one is wired to a single colored border. Pick the direction your design needs, confirm the preview against the destination background, copy both blocks, and rename the class only if it would collide with something you already ship.
Related reading: Hex to RGB for Web Design: Tokens, CSS, and Alpha.