CSS Triangle Generator

Create pure CSS triangles (up, down, left, right) with instant copy-ready code.

CSS Triangle Generator

Generate copy-ready CSS triangles (up, down, left, right) with custom size and color.

Direction
Width
Controls the triangle base width (side borders are calculated as half).
Height
Controls the triangle height (top/bottom borders are calculated as half for left/right).
Unit
Color
Accepts hex, rgb/rgba, hsl/hsla, or CSS named colors.
Note (optional)
Generating…
Result
Copy the CSS, download it, or preview it below.
Your generated CSS will appear here after you click Generate.
Preview will render here.

About CSS Triangle Generator

CSS Triangle Generator – Create Triangles with Pure CSS Borders

Need a clean triangle for a tooltip, speech bubble, dropdown caret, ribbon, or pointer? This CSS Triangle Generator creates copy‑ready CSS using the classic border technique—no images, no SVG, no extra libraries. Pick a direction, set your size and color, and instantly get a minimal snippet you can paste into your stylesheet.

Because CSS triangles are “shape illusions” made from borders, getting the math right (half widths, matching heights, transparent sides) is the part that usually slows you down. This tool does the calculations for you and outputs consistent, readable CSS you can use in modern layouts and component systems.

How It Works

CSS triangles are created by setting an element’s width and height to 0 and then using borders to draw the shape. When three borders are transparent and one border has a solid color, the colored border forms a triangle. The “size” of the triangle is controlled by the border widths.

The border technique in one minute

  • Step 1: Set width: 0 and height: 0 so the element itself has no box area.
  • Step 2: Apply border-style: solid and set all border colors to transparent.
  • Step 3: Make one border colored (top/bottom/left/right). That border becomes the visible triangle.
  • Step 4: Use border widths to control the triangle’s geometry. For an up/down triangle, the side borders are half the width; for left/right, the top/bottom borders are half the height.
  • Step 5: Place the triangle wherever you need it—inside a button, next to a tooltip, or as a pseudo-element.

Key Features

USABLE OUTPUT, NOT JUST DEMOS

The generator returns practical CSS you can paste directly into a class, component, or pseudo-element. The snippet includes the essential properties and avoids unnecessary clutter.

Direction control

Choose the triangle direction (Up, Down, Left, Right). Each direction uses the correct border math so the triangle points precisely as intended.

Flexible sizing

Set width and height independently. This makes it easy to build slim carets, tall pointers, or wide arrowheads—without guessing how border widths translate into the final shape.

Color input

Use hex colors, RGB/RGBA, HSL/HSLA, or a CSS named color. The tool will apply your chosen color to the correct border and keep the remaining borders transparent.

Optional HTML snippet

If you want, generate a tiny HTML example so you can test the output immediately and see the triangle in context.

Use Cases

  • Tooltips: Add a small pointer triangle to connect a tooltip bubble to its trigger element.
  • Speech bubbles: Combine rounded corners with a triangle to create classic chat UI bubbles.
  • Dropdown indicators: Create a caret icon that scales cleanly with font size and adapts to dark mode.
  • Callouts & labels: Use triangles for ribbons, banners, and “corner” labels on cards.
  • Sliders & charts: Make arrows for range indicators or small pointers for annotations.
  • Navigation: Build active state markers or directional cues in menus and stepper components.

CSS triangles shine when you need tiny directional shapes that should remain crisp at any zoom level. They are easy to theme, quick to render, and eliminate asset management overhead.

Optimization Tips

Prefer pseudo-elements for UI arrows

For tooltips and speech bubbles, it’s often best to attach the triangle via ::before or ::after. That keeps your HTML clean and lets you position the triangle precisely with absolute positioning.

Use CSS variables for theming

If your design system supports variables, set the triangle color with a variable like --caret. Then your triangle automatically adapts across light/dark modes and brand themes.

Mind subpixel alignment

On some layouts, a triangle might look slightly “off” due to rounding. If you notice a 1px gap, try nudging the triangle position by 1px or switching to even-numbered sizes so halves are whole numbers.

FAQ

When an element has zero width and height, its borders meet at a point. Each border becomes a wedge shape. If only one wedge is colored and the others are transparent, the colored wedge appears as a triangle.

Yes. Triangles work with any unit that borders support, including px, rem, and em. Using rem is great if you want the triangle to scale with user font settings.

Add the triangle as a pseudo-element on the tooltip container, then use position: absolute and offsets like top/left. Keep the tooltip container position: relative so the arrow positions correctly.

This is usually subpixel rounding or anti-aliasing where the triangle meets another element. Try using even numbers for sizes, nudging the arrow by 1px, or matching the triangle color to the tooltip background exactly.

The triangle itself is decorative, so it should not carry meaning on its own. If it indicates state (like expanded/collapsed), ensure the state is also conveyed with text, ARIA attributes, or other accessible cues.

Deep Dive: Sizing and Geometry

It helps to think of the triangle as the visible portion of one border wedge. For an up-pointing triangle, the visible border is the bottom border. Its width is set by the left and right border widths (which fan out sideways), and its height is the bottom border width (which extends downward). That is why many triangle recipes use “half width” on the side borders: if you want a triangle that is 120px wide, the left and right borders must each be 60px so they meet at the same point.

For left- and right-pointing triangles, the logic rotates ninety degrees. The visible border is on the side, and the top and bottom borders control the overall height. If you want a 80px tall right-pointing arrow, the top and bottom borders are each 40px, while the left border becomes the arrow’s “depth.” Once you understand the relationship, you can intentionally design slim chevrons, chunky pointers, or perfectly symmetrical carets.

This generator lets you enter width and height separately so you are not locked into equilateral shapes. In real interfaces, non-equilateral triangles are common: a dropdown caret might be wider than it is tall; a tooltip pointer might need to be taller so it clears a shadow; and a callout arrow might need extra depth to point to a target on a dense dashboard. Because the tool calculates the halves and assigns borders automatically, you can explore variations quickly without mental math.

Practical Patterns for Real Projects

Tooltip arrow as a pseudo-element

A typical tooltip has a container with padding, rounded corners, and a shadow. The arrow is added with ::after and positioned so its tip touches the trigger element. When the tooltip appears above the trigger, you generate a down-pointing triangle and anchor it to the bottom center of the tooltip container.

Speech bubble with a notch

For chat UIs, you can combine a triangle and a second triangle (or a clipped background) to create a notch that matches the bubble border. One approach is to place a larger triangle underneath (matching the border color) and a slightly smaller triangle on top (matching the bubble fill). This creates the illusion of a bordered arrow with crisp edges.

Indicators for navigation and tabs

Small triangles work nicely as active-state indicators. For example, a triangle can sit under the active tab label and point downward to the content area. Because it’s CSS-only, it scales with responsive typography and can follow theme changes automatically when you use variables.

Reducing layout shifts

Since the triangle element has zero width and height, it does not affect layout the same way an inline SVG might. You can absolutely position it without introducing reflow. This is useful in interactive components where stability matters, like dropdown menus and popovers.

Common Mistakes and How to Avoid Them

Forgetting to set width and height to zero

If the element has a non-zero size, the borders will not meet at a single point, and you’ll end up with trapezoids or strange shapes. Always start with width: 0 and height: 0.

Mixing up the colored border

The colored border is opposite the direction you want the triangle to point. For example, an up-pointing triangle uses a colored bottom border. This generator handles that mapping automatically so you don’t have to remember it.

Using odd sizes that cause half pixels

If the width is an odd number, half the width becomes a fraction (e.g., 101/2 = 50.5). Browsers can render that fine, but it may look slightly blurry on some displays. If you need pixel-perfect edges, use even sizes or rem values that divide cleanly.

Why Choose This Tool

Creating CSS triangles by hand is easy to get wrong: a single swapped border or off-by-half value can flip the direction or skew the proportions. This generator removes the guesswork and provides consistent output you can trust in production UI.

Whether you’re building a design system, prototyping a component, or polishing a landing page, you can generate a triangle in seconds, copy it into your project, and keep your interface lightweight—no image exports, no icon fonts, and no extra dependencies.