How to Make an Arrow (Right) with CSS

Learn how to create a clean, right-pointing arrow using pure CSS. Below you’ll find a live preview, two implementation methods, and quick tips for centering and customizing your arrow.

Live Preview: Arrow (Right)

Method 1: Using clip-path (basic shapes/polygon)

/* Right arrow using a single element and clip-path */
.arrow-right-clip {
  width: 150px;
  height: 100px;
  background: #cd5454;
  /* Create a shaft with a triangular head pointing right */
  clip-path: polygon(
    0 25%,
    75% 25%,
    75% 0,
    100% 50%,
    75% 100%,
    75% 75%,
    0 75%
  );
  /* Optional centering */
  display: block;
  margin-left: auto;
  margin-right: auto;

  /* Optional outline-following shadow for clip-path shapes */
  /* box-shadow will be clipped; use drop-shadow instead */
  /* filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); */
}

Method 2: Using Borders (Rectangle + Triangle)

/* Right arrow built from a rectangle shaft + border triangle head */
.arrow-right-border {
  position: relative;
  width: 120px;         /* shaft length */
  height: 40px;         /* shaft thickness */
  background: #cd5454;  /* arrow color */
  display: inline-block;

  /* Apply drop-shadow to the container so shaft + head share one shadow */
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.2));
}

/* Triangle head */
.arrow-right-border::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px; /* equals the triangle width */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 20px solid transparent;    /* half of shaft height */
  border-bottom: 20px solid transparent; /* half of shaft height */
  border-left: 20px solid #cd5454;       /* triangle width + color */
}

/* Optional centering when used as a block element */
.arrow-right-border.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

How This Works

The clip-path method defines a polygon that outlines an arrow shape, letting a single box render both the shaft and the triangular head without extra elements. It’s resolution-independent, easy to scale, and keeps the element’s content box intact for alignment. Note that clip-path is defined in the CSS Masking specification. The basic shape functions (inset(), circle(), ellipse(), polygon()) are defined in CSS Shapes Module Level 1 and reused by clip-path. Separately, shape-outside (for text wrapping) is part of the CSS Shapes spec and is distinct from clip-path.

The border method draws the arrowhead using a CSS border triangle on a pseudo-element, attached to a rectangular shaft. It’s widely supported and intuitive, but requires a pseudo-element and some arithmetic to keep the head and shaft aligned.

How to Center Content Inside an Arrow (Right)

The easiest way is to use Flexbox or Grid on the arrow element. These approaches work best with box-based arrows like the clip-path variant and the rectangle+triangle border method. (Pure border-triangle-only shapes with zero width/height don’t provide an interior box for content.)

Method 1: Use CSS Flexbox

.arrow-right-clip {
  display: flex;
  justify-content: center;
  align-items: center;
  /* existing shape styles (width, height, background, clip-path) remain */
}

Method 2: Use CSS Grid

.arrow-right-clip {
  display: grid;
  place-items: center;
  /* existing shape styles (width, height, background, clip-path) remain */
}

Note for the border-based arrow: Flex/Grid centering will center content within the rectangular shaft only; it doesn’t account for the arrowhead that sticks out on the right. For visual centering across the full arrow, either add right padding equal to the head width or wrap the arrow in a container and center within that total width.

/* Option A: shift the visual center by padding-right = head width (20px here) */
.arrow-right-border {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 20px; /* match ::after border-left width */
}

/* Option B: wrap and center within the total width (shaft + head) */
.arrow-wrap {
  display: inline-grid;
  place-items: center;
  width: 140px; /* 120px shaft + 20px head (adjust to your values) */
}
<!-- HTML:
<div class="arrow-wrap">
  <div class="arrow-right-border">Label</div>
</div>
-->

When to Use Each Shape Method

Use clip-path when you want a single-element, scalable arrow that can easily hold centered content and respond well to transforms and animations. Use the border method when you need broad compatibility without clip-path, or prefer the simplicity of combining a rectangular shaft with a classic border triangle head.

Quick Customizations

Change the arrow color by updating the background and the triangle’s border-left color. Adjust thickness and proportions by tweaking the element’s height (shaft thickness) and the triangle dimensions (border sizes or polygon points). For a shadow that follows the arrow outline, use filter: drop-shadow(...) rather than box-shadow (which is clipped by clip-path). For the border-based arrow, apply the same filter to the container so both the shaft and pseudo-element head share one shadow.

Accessibility & SEO

If the arrow conveys meaning or is interactive:

  • Prefer a semantic element like <button> (for actions) or <a href> (for navigation) with visible text (e.g., “Next”). If the text is visually hidden, include an accessible name via aria-label or hidden text.
  • If you must use a non-semantic container, add an appropriate role and keyboard support (e.g., role="button", tabindex="0", and handle Enter/Space). Provide an accessible name via inner text or aria-label. A generic <div> with only aria-label technically has an accessible name, but without a suitable role and focusability it’s unlikely to be announced or operable for users.

If the arrow is purely decorative, add aria-hidden="true" so assistive technologies ignore it.