CSS Triangle Generator

About this tool

Pure CSS triangles use a clever optical illusion: set an element's width and height to zero, then set three of its four borders to transparent and one to a solid color. The colored border becomes the visible triangle face, while the transparent borders form the two slanted sides. This technique produces crisp, scalable triangles with zero image weight — perfect for tooltip carets, dropdown arrows, speech bubbles, and decorative dividers. The CSS Triangle Generator removes the mental overhead of calculating which border combination produces which direction and size. Pick a direction, set width, height, and color, then copy the complete zero-dimension CSS block ready to paste into a ::before or ::after pseudo-element.

Why use it

• Zero Image Weight: The border-trick triangle requires no image file, no SVG sprite, and no JavaScript. It is pure CSS rendered by the browser's paint engine, adding exactly zero bytes to your asset payload while remaining infinitely scalable and colorable with a single property change.

• Direction Dropdown: Choose up, down, left, or right. The generator picks the two transparent side borders and the one solid border for each direction automatically, removing lookup tables and guesswork.

• Width and Height: Set width and height independently to produce wide, tall or equal-sided isosceles triangles. For up and down, each transparent border is half the width and the solid border equals the height; for left and right, the transparent borders are half the height and the solid border equals the width.

• Color Sync: A single color picker controls the visible border face. Changing the color updates the output instantly — useful when matching a triangle caret to a component background.

• Tooltip Ready: The .triangle declarations drop into a ::before or ::after pseudo-element on a tooltip or popover. Add content: '' and absolute positioning yourself — the generator outputs only the width, height and border declarations.

• Copy & Paste: One click copies the complete width, height, border-left, border-right, and border-bottom (or equivalent) declarations as a single block. No partial snippets to assemble — paste into your rule and the triangle renders immediately.

How to use

1. Choose a Direction from the dropdown: up, down, left, or right
2. Enter Width and Height in pixels (minimum 8) for equal or asymmetric triangles
3. Pick the visible face color from the color picker
4. Review the triangle preview at the intended size
5. Paste the rule into a ::before or ::after pseudo-element yourself, adding content: '' and positioning
6. Click Copy CSS to grab the .triangle rule with its zero-dimension border declarations

When it helps

• When adding a caret arrow to a tooltip, popover, or dropdown menu pointing toward its anchor
• When creating a triangular section divider between two differently colored page sections
• When building a custom checkbox, radio, or select indicator with a directional arrow
• When decorating a speech bubble or comment callout with a directional pointer
• When creating a play button icon or directional indicator without loading an icon font
• When you need a lightweight arrow for a breadcrumb, accordion toggle or carousel control

Examples

Direction: up, Width: 40, Height: 35, Color: #333333

.triangle {
  width: 0;
  height: 0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:35px solid #333333;
}

Direction: right, Width: 30, Height: 30, Color: #6366f1

.triangle {
  width: 0;
  height: 0;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-left:30px solid #6366f1;
}

Direction: down, Width: 16, Height: 8, Color: #1f2937

.triangle {
  width: 0;
  height: 0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:8px solid #1f2937;
}

Tips

• Always set both width: 0 and height: 0 — missing either one produces a rectangle with angled sides instead of a pure triangle
• Set three sides to transparent and one side to the visible color; the two transparent side-borders must be adjacent to the visible one, not opposite
• Use currentColor as the border color value so the triangle automatically inherits its parent's text color and respects theme changes
• For tooltip carets, use ::before or ::after with position: absolute and match the triangle color to the tooltip background precisely
• Need a rounded triangle? Switch to clip-path: polygon() and apply a CSS filter: blur(1px) on the parent with overflow: hidden for a soft edge approximation

Frequently Asked Questions

Glossary

Border Trick

A CSS technique that creates triangle shapes by setting an element's width and height to zero and using transparent and solid border values to render only the border geometry.

Transparent Border

A CSS border with the transparent color value. In the triangle trick, transparent borders form the invisible slanted sides of the triangle shape.

Pseudo Element

CSS-generated content attached to an element via ::before or ::after selectors. Frequently used to insert decorative shapes like tooltip triangles without additional HTML markup.

Tooltip Caret

A small triangular pointer attached to a tooltip or popover that visually connects it to the element it describes, implemented with the CSS triangle technique on a pseudo-element.

Zero Dimension

Setting both width and height to 0px on an element used for the CSS triangle trick. The element has no visible surface area, leaving only the border geometry visible.

Diagonal Triangle

A triangle pointing in a 45-degree direction (top-left, top-right, bottom-left, bottom-right) created by setting two adjacent borders to color and the other two to transparent.