How do I add a CSS arrow to a tooltip?

Choose direction Bottom so the arrow points down out of the box, set the color to the tooltip background, and pick the Pseudo format. It writes the whole .tooltip::after rule (or your own selector, and ::before if you prefer) with content: ""; position: absolute; and the borders. Give the tooltip position: relative, then add top: 100%; left: 50%; transform: translateX(-50%) to the rule. If you also set a rotation, put both in one line, transform: translateX(-50%) rotate(30deg), because a second transform replaces the first.

How do I make an equilateral triangle in CSS?

Tick Equilateral. For a triangle pointing up or down the height becomes 0.866 × the width, because the height of an equilateral triangle is √3 ÷ 2 of its side: a 100 px base gives border-width: 0 50px 86.6px 50px. For left and right the width follows the height instead. The corner directions are right-angled, so the box is disabled there.

Why does my CSS triangle look blurry?

An odd width is split into half pixels. Width 101 pointing up writes 50.5px side borders, which some screens draw with soft edges. Use an even width for up and down triangles and an even height for left and right ones.

Can a CSS border triangle have an outline or shadow?

Not directly. box-shadow and outline follow the element’s square box, not the colored border. Copy the SVG version instead and add a stroke to the polygon, or use filter: drop-shadow() on the triangle.

How do I make a CSS triangle with clip-path?

Choose Clip Path. The default 100 × 100 px up triangle becomes width: 100px; height: 100px; background: #007bff; clip-path: polygon(50% 0, 0 100%, 100% 100%). The element needs that width and height, unlike the border method, and in return its background can be a gradient or an image. For other polygons, the CSS clip-path generator draws them point by point.

What does the CSS Var format write?

The same rule with the colored border replaced by var(--triangle-color, ), so you can recolor the arrow from a parent. The fallback is the color you picked, for example var(--triangle-color, #ff6600), and it applies whenever --triangle-color is not set.

CSS Triangle Generator

Generate a CSS triangle or arrow pointing in any of eight directions. Set the size and color, then copy border CSS, a ::after rule, a clip-path or an SVG. How it works

Direction

top

Width100px

Height100px

EquilateralThe height is set to 0.866 times the width.

Rotation0deg

Color

Preview Background

Export Format

About the CSS Triangle Generator

A CSS triangle is a box with zero width and height whose borders do the drawing. The default here, 100 × 100 px pointing up, is border-width: 0 50px 100px 50px with only the bottom border colored: that border’s width becomes the triangle’s height, and the two transparent side borders each take half its width.

How to use this tool

Pick a direction on the compass: up, down, left and right give isosceles triangles, the four corners give right-angled ones.
Set Width and Height with the sliders (0 to 300 px) or type up to 999 px, or press a square preset: Caret 10, Tooltip 16, Arrow 20, Pointer 40 or Large 80 px.
Tick Equilateral for a triangle with three equal sides (height 0.866 × width when it points up or down), and set Rotation from 0 to 360° to turn it.
Choose the color, check it on the White, Black or Checker preview, then copy the code as CSS, CSS Var, Pseudo, Clip Path or SVG.

Frequently asked questions

How do I add a CSS arrow to a tooltip?: Choose direction Bottom so the arrow points down out of the box, set the color to the tooltip background, and pick the Pseudo format. It writes the whole .tooltip::after rule (or your own selector, and ::before if you prefer) with content: ""; position: absolute; and the borders. Give the tooltip position: relative, then add top: 100%; left: 50%; transform: translateX(-50%) to the rule. If you also set a rotation, put both in one line, transform: translateX(-50%) rotate(30deg), because a second transform replaces the first.
How do I make an equilateral triangle in CSS?: Tick Equilateral. For a triangle pointing up or down the height becomes 0.866 × the width, because the height of an equilateral triangle is √3 ÷ 2 of its side: a 100 px base gives border-width: 0 50px 86.6px 50px. For left and right the width follows the height instead. The corner directions are right-angled, so the box is disabled there.
Why does my CSS triangle look blurry?: An odd width is split into half pixels. Width 101 pointing up writes 50.5px side borders, which some screens draw with soft edges. Use an even width for up and down triangles and an even height for left and right ones.
Can a CSS border triangle have an outline or shadow?: Not directly. box-shadow and outline follow the element’s square box, not the colored border. Copy the SVG version instead and add a stroke to the polygon, or use filter: drop-shadow() on the triangle.
How do I make a CSS triangle with clip-path?: Choose Clip Path. The default 100 × 100 px up triangle becomes width: 100px; height: 100px; background: #007bff; clip-path: polygon(50% 0, 0 100%, 100% 100%). The element needs that width and height, unlike the border method, and in return its background can be a gradient or an image. For other polygons, the CSS clip-path generator draws them point by point.
What does the CSS Var format write?: The same rule with the colored border replaced by var(--triangle-color, <your color>), so you can recolor the arrow from a parent. The fallback is the color you picked, for example var(--triangle-color, #ff6600), and it applies whenever --triangle-color is not set.

Where CSS triangles go

The small pointer under a tooltip, the caret beside a dropdown label, the tail of a speech bubble and the arrow on a breadcrumb step are all border triangles. Each sits in a ::before or ::after pseudo-element, so the arrow needs no extra HTML or image.

The five formats:

CSS writes the colors as they are.
CSS Var writes the colored border as var(--triangle-color, #007bff). The fallback is the color you picked.
Pseudo writes the whole rule for your selector, such as .tooltip::after, with content: "" and position: absolute; give the parent position: relative and add top or left.
Clip Path writes a box of your width and height cut with clip-path: polygon(…). Its background can be a gradient or an image.
SVG writes a <polygon> the same size, which you can give a stroke.

How the border trick works

An element with zero width and height is all border, and where two borders meet the browser draws the joint as a diagonal. Color one border, make its neighbors transparent, and what is left is a triangle.

For up and down, the colored border's width is the height you set and the two side borders are each half the width. Left and right swap the roles. A corner direction uses two borders at full size and gives a right-angled triangle: Top Left at 100 × 100 px is border-width: 100px 100px 0 0; border-color: #007bff transparent transparent transparent;.

The SVG version draws the same shape as polygon points inside a box of your width and height, so the 100 × 100 px up triangle is 50,0 0,100 100,100.

Equilateral sets the height to 0.866 × the width (√3 ÷ 2) for up and down, so a 100 px base gives 86.6 px; for left and right the width follows the height. Rotation, 0 to 360°, adds transform: rotate(30deg) (for 30°) to every CSS format and turns the SVG polygon about the centre of its box.

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.