CSS Triangle Tips, Best Practices and Common Mistakes

The number-one reason a CSS triangle does not show up is a forgotten width: 0; height: 0; or a border set to solid without a color — the shape only appears when the box has no size and exactly one border is colored while its neighbors are transparent. Get that foundation right and the border trick is rock solid.

Here are the best practices, settings and troubleshooting steps for triangles that look sharp and sit exactly where you want them.

Best practices

• Keep the box at zero size. The trick depends on the borders meeting in the center. Any width or height breaks the clean triangle.
• Use a pseudo-element for arrows. Attach carets to ::before or ::after so the triangle is part of the component, not an extra markup element.
• Match the arrow to its surface. A tooltip arrow's colored border should equal the bubble's background color so the two read as one shape.
• Control size with border width. The triangle scales with the border widths; keep the two transparent sides equal for a symmetrical point.
• Recolor via a variable. Set the colored border to a CSS custom property so themes and hovers can change every arrow at once.

Common mistakes and fixes

Troubleshooting: my triangle isn't showing

Walk through three checks. First, confirm the element has width: 0 and height: 0 — a sized box turns the wedge into a trapezoid. Second, confirm exactly one border has a color and the adjacent ones are transparent, not simply omitted. Third, if the triangle is on a pseudo-element, make sure you included content: ""; and gave it position: absolute so it can sit against its parent. The generator writes all of this correctly, which is the fastest way to rule out a typo.

Positioning a tooltip arrow cleanly

Place the arrow with position: absolute against the bubble edge, then center it along that edge with left: 50% and a negative margin equal to half its width. Because the triangle is fixed-size in pixels, it will not scale with the viewport — perfect for consistent carets, though you would switch to SVG if you need a fully fluid shape. Everything runs locally in your browser with no uploads, so you can iterate on sizes and colors freely, offline included.

Try the CSS Triangle Generator — free and 100% in your browser.

FAQ

Why does my triangle look like a trapezoid?

The element still has width or height. The border trick only collapses into a clean triangle when the box is exactly zero by zero, so the four borders meet at the center.

How do I make the triangle edges crisp instead of fuzzy?

Use whole-pixel border widths and avoid sub-pixel positioning. On high-density screens the border trick is already sharp; blur usually comes from fractional widths or a transformed parent.

Can I add a border or shadow around a CSS triangle?

Not directly, since the shape is itself made of borders. Fake it by stacking a slightly larger triangle of a darker color behind the main one, or use filter: drop-shadow() on the element for a real shadow that follows the shape.

Should I use a triangle or clip-path for arrows?

For fixed-size tooltip and dropdown arrows, the border trick is lighter and universally supported. Use clip-path when you need a scalable or more complex shape.

Related free tools

• CSS Tooltip Generator — full tooltips with the arrow built in.
• CSS Clip Path Generator — scalable custom shapes.
• CSS Border Radius Generator — soften component corners.
• CSS Box Shadow Generator — depth for bubbles and cards.

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio building web apps, SaaS and custom software. When your UI needs polished, production-ready components at scale, explore what ByteVancer can build.