How to Make a Chevron (Right) with CSS

Learn two reliable ways to draw a right-pointing chevron using pure CSS. Use a quick border-and-rotate trick or build precise arms with pseudo-elements for full control.

Live Preview: Chevron (Right)

Method 1: Using Borders + Rotate

.chevron-right {
  width: 120px;
  height: 120px;
  box-sizing: border-box;
  border-top: 20px solid #cd5454;
  border-right: 20px solid #cd5454;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

Method 2: Using Pseudo-elements (::before/::after)

.chevron-right {
  position: relative;
  width: 120px;
  height: 120px;
}

.chevron-right::before,
.chevron-right::after {
  content: "";
  position: absolute;
  right: 10px;            /* meeting point */
  top: 50%;               /* share the same vertical center */
  width: 80px;            /* arm length */
  height: 18px;           /* stroke thickness */
  background: #cd5454;
  transform-origin: right center;
}

.chevron-right::before {
  transform: translateY(-50%) rotate(45deg);
}

.chevron-right::after {
  transform: translateY(-50%) rotate(-45deg);
}

How This Works

In the border method, two thick borders (top and right) form an “L” that is rotated 45 degrees, visually becoming a clean, right-pointing chevron. The element’s actual box remains square; only the borders and transform create the shape.

In the pseudo-element method, two rectangular bars are rotated ±45 degrees and anchored by their right edges. By aligning both at top: 50% and using translateY(-50%), their centers match so the arms meet at a single point, forming the “>” shape with precise control over arm length and thickness.

How to Center Content Inside a Chevron (Right)

Centering content depends on the method you use:

With the Pseudo-elements Method

You can safely center children on .chevron-right because the element itself isn’t rotated.

.chevron-right {<br>  /* existing chevron styles here */<br>  display: flex;
/* or: display: grid; place-items: center; */<br>  justify-content: center;<br>  align-items: center;<br>}

With the Border + Rotate Method

Applying Flex/Grid directly to the rotated element will also rotate the content. Use one of the following:

Option A: Use a Wrapper (recommended)

.chevron-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center; /* centers the content, not rotated */
}

.chevron-wrap .chevron-right {
  position: absolute;
  inset: 0; /* stretch to fill the wrapper */
  /* border+rotate chevron styles go here */
}

.chevron-wrap .content {
  position: relative; /* stays upright and centered */
}

Option B: Counter-rotate the Inner Content

.chevron-right {
  /* border+rotate chevron styles here */
  display: flex;
  justify-content: center;
  align-items: center;
}

.chevron-right > .content {
  transform: rotate(-45deg); /* cancels the parent's rotation */
}

When to Use Each Shape Method

Use Borders + Rotate for a fast, single-element chevron with crisp lines and minimal code. Choose Pseudo-elements when you need fine-grained control over stroke thickness, arm length, and spacing, or when you want to animate each arm independently.

Quick Customizations

Change the color by updating #cd5454 to your brand color, and adjust thickness by modifying border widths (Method 1) or the bar height (Method 2). To add a subtle outline, wrap the chevron in a container and apply a box-shadow to that container.

Accessibility & SEO

If the chevron is decorative, add aria-hidden=”true”; if it conveys meaning, provide an accessible label on the container (e.g., aria-label=”Next”).