How to Make a Chevron (Up) with CSS

Create a clean Chevron (Up) icon using pure CSS with no external image files or SVGs. Below are two reliable techniques plus simple ways to center content and customize the look.

Live Preview: Chevron (Up)

Method 1: Using Pseudo-Elements (Border Strokes)

/* Chevron (Up) using two rotated border lines ,  apex at top center */
.chevron-up {
  position: relative;
  aspect-ratio: 2 / 1; /* width is twice the height */
  width: 200px;
  height: auto;
  margin: 2rem auto;
}

.chevron-up::before,
.chevron-up::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 70.71%;            /* √2/2 of the container's width */
  border-top: 12px solid #cd5454; /* stroke thickness + color */
  z-index: 0;               /* ensure content can sit above strokes */
}

.chevron-up::before {
  left: 0;
  transform-origin: left bottom;
  transform: rotate(45deg);
}

.chevron-up::after {
  right: 0;
  transform-origin: right bottom;
  transform: rotate(-45deg);
}

Method 2: Using Linear-Gradient Backgrounds (No Extra Elements)

/* Chevron (Up) drawn with two diagonal background gradients */
.chevron-up {
  width: 150px;
  height: 120px;
  margin: 2rem auto;
  background:
    linear-gradient(45deg, transparent 46%, #cd5454 47%, #cd5454 53%, transparent 54%) bottom left,
    linear-gradient(-45deg, transparent 46%, #cd5454 47%, #cd5454 53%, transparent 54%) bottom right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

How This Works

In the pseudo-element method, two thin “strokes” are created with border-top and rotated ±45 degrees from the bottom corners. Where the arms meet (the apex) depends on the container’s aspect ratio and the arm length (the pseudo-elements’ width). To place the apex at the top center, make the box twice as wide as it is tall (aspect ratio 2:1) and set each arm’s width to about 70.71% (√2/2) of the container’s width, as shown in the CSS above.

The gradient method paints two diagonal stripes using linear-gradient backgrounds anchored to the bottom left and bottom right. Adjusting the color stops controls the stroke thickness without extra elements. Note: linear-gradients are CSS images; this approach avoids external image files or SVG assets.

How to Center Content Inside a Chevron (Up)

The easiest way to center text or an icon inside the chevron container is to use Flexbox or Grid. Add one of the following directly to the shape’s CSS.

Method 1: Use CSS Flexbox

.chevron-up {
  /* existing chevron styles */
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid

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

If content appears under the pseudo-element strokes

Absolutely positioned pseudo-elements can paint above non-positioned content. If your centered content looks “under” the strokes, give the content a higher stacking order:

.chevron-up {
  position: relative; /* already set in Method 1 */
  display: grid;      /* or flex, from the centering examples */
  place-items: center;
}

.chevron-up::before,
.chevron-up::after {
  z-index: 0; /* strokes below content */
}

.chevron-up > * {
  position: relative;
  z-index: 1; /* content above strokes */
}

When to Use Each Shape Method

Use pseudo-elements when you want crisp, controllable “stroke” lines that scale predictably and allow easy animation of each arm. Use linear-gradients when you prefer a single-element solution that keeps markup minimal; it’s fast and clean, but fine-tuning line joins and thickness may be slightly less intuitive.

Quick Customizations

Change the color by swapping #cd5454 for any brand color, and adjust line weight by changing border-top thickness (method 1) or widening the color stop range in the gradients (method 2). Add an outline by wrapping the chevron in a container and applying a standard border to that wrapper.

Accessibility & SEO

If the chevron is purely decorative, hide it from assistive tech with aria-hidden=”true”. If it’s interactive (e.g., a “scroll up” control), use a semantic button or link and label that control, for example: <button aria-label=”Scroll up”>…</button>. Avoid placing ARIA labels on a generic non-interactive container when the element is meant to be a control.