How to Make a Chevron (Down) with CSS

Learn two reliable ways to draw a clean chevron (down) purely with CSS, plus tips to center content inside and customize it quickly.

Live Preview: Chevron (Down)

Method 1: Using clip-path (Polygon)

.chevron-down {
  width: 140px;
  height: 120px;
  background: #cd5454;
  /* Creates a thick "V" band pointing down */
  clip-path: polygon(
    15% 25%,
    50% 100%,
    85% 25%,
    75% 25%,
    50% 80%,
    25% 25%
  );

  /* Centering the box itself (optional) */
  display: block;
  margin: 0 auto;
}

Method 2: Using Background Gradients

.chevron-down {
  width: 140px;
  height: 120px;

  /* Two diagonals that meet at the bottom center */
  background:
    linear-gradient(135deg, transparent 46%, #cd5454 46% 54%, transparent 54%) left / 50% 100% no-repeat,
    linear-gradient(225deg, transparent 46%, #cd5454 46% 54%, transparent 54%) right / 50% 100% no-repeat;

  /* Centering the box itself (optional) */
  display: block;
  margin: 0 auto;
}

How This Works

The clip-path method cuts the element into a custom polygon that traces a thick “V” shape, letting the background color show only where the chevron band exists. It scales cleanly by adjusting the polygon’s percentage points.

The gradient method layers two diagonal linear-gradients, each sized to half of the element, so their colored bands meet at the bottom center to form the chevron. Tweaking the gradient stop percentages changes the stroke thickness.

How to Center Content Inside a Chevron (Down)

Important: clip-path clips the element and its descendants. If you put text or an icon inside the same element and center it with Flexbox/Grid, it will be clipped and only visible where the “V” band exists. To avoid this, render the chevron on a pseudo-element (or child) and keep the parent unclipped for centering content.

Clip-path version (use a pseudo-element)

.chevron-down {
  position: relative;
  width: 140px;
  height: 120px;

  /* Center content without clipping it */
  display: grid;
  place-items: center;

  /* Center the whole box (optional) */
  margin: 0 auto;
}

.chevron-down::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #cd5454;
  clip-path: polygon(
    15% 25%,
    50% 100%,
    85% 25%,
    75% 25%,
    50% 80%,
    25% 25%
  );
  pointer-events: none; /* allow clicks to pass through if this is inside a button/link */
}

<div class="chevron-down">
  <span>Centered content</span>
</div>

Gradient version (Flexbox or Grid on the same element)

Backgrounds don’t clip children, so you can center content directly on the element.

.chevron-down {
  /* ...gradient chevron styles from above... */
  display: grid;          /* or display: flex; */
  place-items: center;    /* or justify-content/align-items */
}

When to Use Each Shape Method

Use clip-path for a precise, single-color, scalable chevron with clean edges; it’s great when you want an actual shape cutout or need to place the effect on a pseudo-element. Just remember: don’t put content inside the clipped element, use a pseudo-element or child for the chevron.

Use background gradients when you prefer broad browser support without clipping, want simple thickness control via gradient stops, or need to overlay the chevron effect on images or patterns. You can center content directly on the same element.

Quick Customizations

Change color by updating background: #cd5454 (clip-path) or the colored stops (#cd5454) in gradients. Adjust thickness by moving the inner polygon points (clip-path) or widening the gradient bands (e.g., 46% 54% to 43% 57%).

Accessibility & SEO

If the chevron is decorative, add aria-hidden=”true”. If it communicates state (e.g., “expand”), put it in a proper control with an accessible label and state. For expand/collapse, prefer a button with aria-expanded:

<button aria-expanded="false" aria-label="Expand">
  <span aria-hidden="true">▼</span>
</button>

Update aria-expanded dynamically (true/false) when the section opens/closes.