CSS Triangle Use Cases: Arrows, Carets and Ribbons

The most useful CSS triangles are tooltip arrows, dropdown carets, speech-bubble tails, corner ribbons and breadcrumb chevrons — small shapes that appear all over an interface and never need an image. Instead of theory, this guide leads with the components you will actually build, each with code you can generate and drop in.

Example 1: the tooltip arrow

A tooltip is a bubble plus a little arrow. Add the triangle to an ::after pseudo-element and point it toward the trigger:

.tooltip::after {
  content: "";
  position: absolute;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #111827;
}

Match the border color to the bubble background and the arrow reads as one shape.

Example 2: the dropdown caret

The tiny downward triangle next to a menu label is a classic caret. A small down-pointing triangle beside the text signals "this expands" without an icon font:

.caret {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

Using currentColor makes the caret inherit the text color automatically.

Example 3: the speech bubble tail

Chat interfaces attach a tail to each message bubble. A left-pointing triangle on the bubble's edge gives it that conversational look, with the color matching the bubble so the tail blends in seamlessly.

Example 4: the corner ribbon

Ribbons that wrap a card corner often use triangles for the folded-under shadow. A small darker triangle behind the ribbon band sells the fold, adding depth to "New" or "Sale" badges.

Example 5: breadcrumb chevrons

Right-pointing triangles make clean separators between breadcrumb links, replacing slash characters with a crisper visual divider.

Scenario cheat sheet

A fast workflow

For any of these, pick the direction in the generator, set the size and color, and copy the border CSS onto your element or pseudo-element. Because the tool supports eight directions including diagonals, even ribbon folds are a couple of clicks. Everything runs in your browser with no uploads, so it is safe for client work and fully offline.

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

FAQ

What direction should a tooltip arrow point?

Toward the element that triggered the tooltip. A tooltip above its trigger has a downward arrow on its bottom edge; one below has an upward arrow on its top edge. The generator writes the correct border mapping for each.

How do I make the caret inherit my text color?

Set the colored border to currentColor instead of a fixed value. The caret then matches the surrounding text and updates automatically with hover and theme changes.

Can I build a whole speech bubble with just triangles?

The bubble body is a rounded box; the triangle supplies only the tail. Combine a border-radius box for the body with a color-matched triangle on the edge to complete the shape.

Are triangle separators better than a slash in breadcrumbs?

They give a cleaner, more designed look and scale crisply, but keep them decorative — screen readers should still parse the breadcrumb structure from the markup, not the visual separator.

Related free tools

• CSS Tooltip Generator — the complete tooltip with its arrow.
• CSS Clip Path Generator — for scalable custom shapes.
• CSS Border Radius Generator — round the bubble body.
• CSS Box Shadow Generator — add depth to ribbons 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 these small components add up to a full product, explore how ByteVancer can design and build it.