UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Triangle Generator

Create directional CSS triangles using the transparent border technique with sizing controls.

About CSS Triangle Generator

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 CSS Triangle Generator

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 Picker

Choose from up, down, left, right, top-left, top-right, bottom-left, and bottom-right with a single click. The generator calculates the correct combination of transparent and solid borders for each direction automatically, removing lookup tables and guesswork.

Size Slider

Set width and height independently to produce equilateral, right, or isosceles triangles. The generator recalculates border widths as half the horizontal or vertical dimension as needed, ensuring the proportions stay mathematically correct.

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 dynamic theme color or component background that changes between light and dark mode.

Tooltip Ready

The output is designed to drop directly into a ::before or ::after pseudo-element on a tooltip or popover container. Toggle the pseudo-element wrapper option and the generator adds content: '' and positioning boilerplate to the output.

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 CSS Triangle Generator

  1. Click the direction you want: up, down, left, right, or a diagonal variant
  2. Drag the size slider or set width and height independently for asymmetric triangles
  3. Pick the visible face color from the color picker
  4. Review the triangle preview at the intended size
  5. Optionally apply the styles to a ::before or ::after pseudo-element in the output
  6. Click Copy CSS to grab the zero-dimension border declaration

When to use CSS Triangle Generator

  • 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 directional arrow that respects the current text color via currentColor

Examples

Upward triangle

Input: Direction: up, width: 40px, height: 35px, color: #333

Output: width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 35px solid #333;

Right-pointing arrow

Input: Direction: right, size: 30px, color: #6366f1

Output: width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 30px solid #6366f1;

Tooltip caret down

Input: Direction: down, width: 16px, height: 8px, color: #1f2937

Output: 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

How does the CSS triangle border trick work?▾
An element with zero width and height has no visible surface, but its borders still render. When three borders are set to transparent and one is set to a solid color, the rendering engine draws the colored border as a triangle — the transparent borders form the angled sides.
Why do I set width and height to zero for triangles?▾
If the element has any positive width or height, the colored border renders as a rectangle with angled corners, not a pure triangle. Zero dimensions force all the visual space into the borders themselves, making the border the entire rendered shape.
Can I make a triangle with rounded corners?▾
The border-trick triangle cannot be rounded since border-radius does not apply to zero-dimension elements in a usable way. For rounded triangles, use clip-path: polygon() with a separate CSS filter for rounded corners, or use an SVG with a path and stroke-linejoin: round.
Should I use clip-path or border for triangles?▾
clip-path is more flexible, scales better, supports animation, and avoids the zero-dimension quirk. border-trick triangles have broader legacy browser support and no layout implications. For modern projects, clip-path is preferred; for maximum compatibility or simple tooltip carets, the border method is still appropriate.
How do I attach a triangle to a tooltip?▾
Use position: absolute on a ::before or ::after pseudo-element of the tooltip container. Set the pseudo-element's zero-dimension borders, then position it with top/bottom/left/right to place the caret at the desired edge and match its color to the tooltip background.
Can the triangle have a border or outline?▾
The border-trick triangle cannot have a separate border or outline applied to it because the triangle is itself composed of borders. For an outlined triangle, stack two triangles — a slightly larger one in the outline color behind the main colored one — using ::before and ::after.
How do I create a diagonal arrow shape?▾
Diagonal triangles use two adjacent borders set to transparent and two to the desired color — or set one to transparent and one thick, one thin, differently. The generator handles all eight directional variants including the four diagonals with correct border combinations.
Why does my triangle render as a square?▾
If you see a rectangle instead of a triangle, the element's width or height is not zero, or only one border is set rather than the required three. Check that both width: 0 and height: 0 are applied, and that the two adjacent borders (not opposite) are set to transparent.

Explore the category

CSS Gradient Generator Create linear or radial gradients with stops, angles, and copy-ready background snippets. CSS Keyframes Generator Compose starter animations with timing controls and copy @keyframes blocks. CSS Box Model Visualizer Visualize the CSS box model interactively — adjust margin, border, padding, and content size to understand element dimensions. Border Radius Generator Shape corners with unified or per-corner sliders and export shorthand border-radius CSS. Scrollbar Styler Tint scrollbar thumbs and tracks for WebKit and Firefox using copy-ready pseudo-element CSS. CSS Minifier Minify CSS by removing comments and whitespace
CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min CSS Custom Properties (Variables) Explained with Real Examples CSS custom properties are far more powerful than SASS variables — they are live, inheritable, and can be changed with JavaScript at runtime. Apr 2026 · 8 min

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.