CSS Generators·4 min read

CSS Triangles: The Border Trick vs clip-path

Triangles show up all over interfaces: tooltip arrows, dropdown carets, speech bubbles, ribbons and play buttons. CSS has no triangle property, but there are two dependable ways to draw one. This guide explains the classic border trick and why it works, the clip-path alternative, the math behind equilateral triangles, how to attach an arrow to a tooltip, and how the CSS Triangle Generator writes either version for eight directions.

Open the free CSS Triangle Generator All insights

Where CSS triangles are used

Small shapes, many jobs.

The most common triangle is the little arrow under a tooltip or popover that points at the thing it describes. Close behind are carets on dropdown buttons, the notch on chat bubbles, corner ribbons on product cards and the play symbol on video thumbnails. Each is small, sits next to other UI, and needs to match the color of the element it is attached to.

Drawing them in CSS keeps them sharp at any zoom level and lets them change color with the theme. An icon font or image works too, but a pure CSS shape has no extra request and no alignment surprises from font metrics.

How the border trick works

Borders meet at a diagonal.

Give an element width: 0 and height: 0 and then thick borders. With no content box, the four borders meet in the middle, and each one is drawn as a triangle because neighboring borders are cut at a diagonal where they join. Color one border and make its neighbors transparent, and a single triangle remains.

For a triangle pointing up that is 100px wide and 80px tall, set border-bottom: 80px solid #6366f1; and border-left and border-right to 50px solid transparent. The colored border sits opposite the point, its width sets the height, and the two transparent borders each set half the base. Corner triangles need only two borders, such as border-top in color and border-right transparent for a right angle in the top left.

The trick is old, and that is its strength. It works in every browser that has ever supported CSS borders, it needs no special property, and the triangle takes on the border color, so a theme switch or a hover state can recolor it with one declaration. Its limits come from the same place: the shape is made of borders, so it cannot hold a gradient or an image, and its box has no real width or height for layout. For a small arrow or caret those limits rarely matter.

The clip-path alternative

A real box, cut to shape.

clip-path takes a normal element with a real width and height and cuts away everything outside a polygon. An upward triangle is clip-path: polygon(50% 0, 100% 100%, 0 100%); on a 100 by 80 pixel box. Because the coordinates are percentages, resizing the box resizes the triangle without recalculating anything.

The main advantage is the background. A clip-path triangle can have a gradient, an image or a pattern, which the border trick cannot. The trade-off is that the cut area is gone, so borders and box shadows on the element are clipped too. For a shadow that follows the triangle, wrap it and put filter: drop-shadow() on the wrapper.

Equilateral triangles and other sizes

A bit of geometry.

An equilateral triangle has three equal sides, so its height is the base times the square root of 3 divided by 2, about 0.866. A 100px wide triangle pointing up should be about 87px tall. The generator's Equilateral switch calculates this, using the width for up and down triangles and the height for left and right ones.

Most interface arrows are flatter than equilateral. A tooltip arrow of 12 by 8 pixels or a caret of 10 by 6 pixels reads as a pointer without drawing attention. Stick to whole pixel values, since fractional borders can render with soft, uneven edges.

Attaching an arrow to a tooltip

Let a pseudo-element carry it.

An arrow belongs to its tooltip, so it is usually drawn with ::after instead of an extra element. The tooltip gets position: relative, and the pseudo-element gets content: "", position: absolute and the triangle styles. For a tooltip above its target, the arrow points down, sits at top: 100% and is centered with left: 50% and transform: translateX(-50%).

In the CSS Triangle Generator, choose Tooltip arrow and pick the direction the arrow should point. The CSS tab writes the tooltip rule and the full ::after rule with its position, and the preview shows it on a sample tooltip. Match the arrow color to the tooltip background, which the tool does by using the same color for both.

Common triangle mistakes

Small shapes, easy slips.

Most broken triangles come from one of these.

Forgetting width: 0 and height: 0, which leaves a trapezoid instead of a point.
Coloring the wrong border. The colored border is on the opposite side from where the triangle points.
Adding a box-shadow to a border triangle; the shadow follows the invisible box. Use filter: drop-shadow() instead.
Rotating a triangle to change direction when a different border would do; rotation can blur the edges.
Using the border trick when the triangle needs a gradient. Switch to clip-path, which keeps a normal background.