CSS Arrow Generator

Draw an arrow as a single element. Set how big the head is and how thick the shaft, turn it whichever way you need, and copy a rule that works at any size.

About CSS arrows

An arrow is one of the few shapes that genuinely needs seven points: four for the shaft, three for the head. Drawn the old way that meant two elements - a rectangle and a border-hack triangle - kept in sync by hand, breaking the moment anyone changed a size. As a single clip-path it is one element, one rule, and the two halves can never drift apart.

The generator gives you two numbers to think about: how far back the head reaches, and how thick the shaft is. Everything else follows.

The code

.shape {
  clip-path: polygon(0% 30%, 65% 30%, 65% 0%, 100% 50%, 65% 100%, 65% 70%, 0% 70%);
  width: 240px;
  height: 240px;
  background: #0d6efd;
}

Read it as a walk around the outline, starting at the top-left of the shaft. 65% is where the head begins - lower it and the head grows. The shaft runs from 30% to 70% vertically, so it is 40% of the height thick; move that pair towards 50% for a thinner arrow. 100% 50% is the tip.

Arrow, chevron or caret?

Solid arrow - head plus shaft, the shape above. Reads as "go somewhere": next slide, submit, forward.
Chevron - just the two strokes of the head, with a thickness setting instead of a shaft. The right choice for breadcrumbs, accordions and pagination, where an arrow would shout.
Thin arrow - a long stroke with a small head, for links and inline "read more" cues.
Double arrow - heads at both ends, for resize handles and range controls.
Arrow with tail - a notched back edge, the classic banner or progress-step arrow.

Turning it around

The studio has ready-made left, up and down presets, but the honest answer for anything in between is the rotation slider here, or transform: rotate() on the element. A rotation is cheap, animates smoothly, and one arrow shape rotated four ways is less code than four polygons. Use a separate polygon only when the shape itself should differ - a wider head when it points up, say - rather than just its direction.

Frequently asked questions

Should I use a CSS arrow or an SVG icon?

If the arrow is decoration on an element you already have - a button background, a progress step, a banner - CSS wins: no extra markup, no extra request. If it is an icon in its own right, especially one that needs a stroke rather than a fill, SVG is the better tool. This generator exports both, so you can try either.

How do I make the arrow's outline rather than a solid one?

clip-path only fills, so an outline needs a second element: a slightly smaller arrow in the background color on top of a larger one in the outline color. If that sounds fiddly, it is - export as SVG and put a stroke with fill: none on the path instead.

Can I animate the arrow when someone hovers a button?

Yes, and the cheap version is the good one: put the arrow on a pseudo-element and transform: translateX(4px) it on hover. Transitioning the clip-path itself also works, but only between polygons with the same number of points, and it costs more to animate than a transform does.

Why does my arrow look stretched?

Because the polygon fills its box, and the box is not the proportion you had in mind. The percentages are of the element's own width and height, so a wide box makes a long arrow and a tall one makes a stubby one. Set an aspect-ratio - 3 / 1 is a good starting point for a horizontal arrow - and it will keep its shape.

Menu