How to Make a Chevron (Left) with CSS

Learn how to build a left-pointing chevron shape in pure CSS using two reliable techniques: border + transform and clip-path. These approaches are lightweight, responsive-friendly, and easy to customize.

Live Preview: Chevron (Left)

Method 1: Using Borders + Transform

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

Method 2: Using clip-path (Filled Chevron)

.chevron-left-clip {
  width: 150px;
  height: 120px;
  background: #cd5454;
  -webkit-clip-path: polygon(40% 0, 100% 0, 60% 50%, 100% 100%, 40% 100%, 0 50%);
  clip-path: polygon(40% 0, 100% 0, 60% 50%, 100% 100%, 40% 100%, 0 50%);
}

How This Works

The border method draws an L shape using only the top and left borders of a square, then rotates it -45deg to form a crisp left-pointing chevron. The border thickness controls the stroke weight of the chevron arms.

The clip-path method creates a filled left-pointing chevron by clipping a rectangle to a polygon. It’s ideal when you want a solid chevron with adjustable proportions that scales cleanly.

How to Center Content Inside a Chevron (Left)

Centering content in the clip-path chevron is straightforward, but with the border + transform method, rotating the container also rotates its children. Use one of the approaches below to keep text/icons upright.

Border + Transform: Option A (Counter-rotate children)

.chevron-left {
  width: 120px;
  height: 120px;
  box-sizing: border-box;
  border-top: 18px solid #cd5454;
  border-left: 18px solid #cd5454;
  transform: rotate(-45deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.chevron-left > * {
  transform: rotate(45deg); /* counter-rotate to keep content upright */
}

Border + Transform: Option B (Preferred , draw on a pseudo-element)

.chevron-left-container {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center; /* content stays upright */
}

.chevron-left-container::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-top: 18px solid #cd5454;
  border-left: 18px solid #cd5454;
  transform: rotate(-45deg); /* only the shape rotates */
}

clip-path Chevron: Centering Content

.chevron-left-clip {
  /* existing shape styles */
  display: grid;
  place-items: center;
}

Note: Applying clip-path on the container will also clip its children. If you want content to sit centered but not be clipped, draw the shape on a pseudo-element instead of the container.

.chevron-left-clip-wrap {
  position: relative;
  width: 150px;
  height: 120px;
  display: grid;
  place-items: center;
}

.chevron-left-clip-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #cd5454;
  -webkit-clip-path: polygon(40% 0, 100% 0, 60% 50%, 100% 100%, 40% 100%, 0 50%);
  clip-path: polygon(40% 0, 100% 0, 60% 50%, 100% 100%, 40% 100%, 0 50%);
}

When to Use Each Shape Method

Use the border + transform method for a lightweight, outline-style chevron with simple thickness control via border width. Choose clip-path for a filled chevron that scales smoothly and is easier to use as a background block behind text or icons.

Quick Customizations

Change the color by updating #cd5454 to any hex or CSS color. Increase or decrease the stroke thickness with the border widths (Method 1), or adjust the polygon percentages (Method 2) to make the chevron narrower or wider.

Accessibility & SEO

Don’t rely on aria-label on a non-interactive div, many screen readers won’t announce it. Use the pattern that matches your use case:

  • If it’s interactive: use a button or link and give it an accessible name (e.g., aria-label=”Back” or visible text).
  • If it’s purely decorative: add aria-hidden=”true” to the chevron element (or ensure its pseudo-element is purely decorative).
  • If it must be announced but isn’t interactive: add role=”img” and aria-label to expose it correctly.
<!-- Interactive example -->
<button class="chevron-button" aria-label="Back"></button>

.chevron-button {
  position: relative;
  width: 48px;
  height: 48px;
  background: none;
  border: 0;
  cursor: pointer;
}

.chevron-button::before {
  content: "";
  position: absolute;
  inset: 8px; /* creates padding inside the button */
  box-sizing: border-box;
  border-top: 4px solid currentColor;
  border-left: 4px solid currentColor;
  transform: rotate(-45deg);
}

/* Decorative example */
<div class="chevron-left" aria-hidden="true"></div>

/* Non-interactive but meaningful */
<div class="chevron-left-container" role="img" aria-label="Back"></div>