How to Make an Arrow (Up) with CSS

Want a clean, scalable up arrow made purely with CSS? Below you’ll find a live preview plus two easy techniques you can copy and paste into your project.

Live Preview: Arrow Up

Method 1: Using Borders (Triangle Head) + Rectangle Shaft

/* Arrow Up: rectangle shaft + triangle head */
.arrow-up {
  width: 28px;              /* shaft width */
  height: 90px;             /* shaft height */
  background: #cd5454;      /* arrow color */
  position: relative;
  display: block;
  margin: 20px auto;        /* centers the element */
}

.arrow-up::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 28px solid #cd5454; /* triangle pointing up */
}

/* Arrow Up: rectangle shaft + triangle head */
.arrow-up {
  width: 28px;              /* shaft width */
  height: 90px;             /* shaft height */
  background: #cd5454;      /* arrow color */
  position: relative;
  display: block;
  margin: 20px auto;        /* centers the element */
}

.arrow-up::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 28px solid #cd5454; /* triangle pointing up */
}

Method 2: Using clip-path (Single Element)

/* Arrow Up with a single element */
.arrow-up-clip {
  width: 140px;
  height: 140px;
  background: #cd5454;
  clip-path: polygon(
    50% 0%,
    85% 30%,
    62% 30%,
    62% 100%,
    38% 100%,
    38% 30%,
    15% 30%
  );
  -webkit-clip-path: polygon(
    50% 0%,
    85% 30%,
    62% 30%,
    62% 100%,
    38% 100%,
    38% 30%,
    15% 30%
  );
  display: block;
  margin: 20px auto; /* centers the element */
}

/* Arrow Up with a single element */
.arrow-up-clip {
  width: 140px;
  height: 140px;
  background: #cd5454;
  clip-path: polygon(
    50% 0%,
    85% 30%,
    62% 30%,
    62% 100%,
    38% 100%,
    38% 30%,
    15% 30%
  );
  -webkit-clip-path: polygon(
    50% 0%,
    85% 30%,
    62% 30%,
    62% 100%,
    38% 100%,
    38% 30%,
    15% 30%
  );
  display: block;
  margin: 20px auto; /* centers the element */
}

How This Works

The border-based method draws a triangle by giving an element zero width/height and using thick borders: the colored border becomes the triangle (here, border-bottom forms the up-pointing tip). A rectangular shaft sits below the triangle as the main element’s background.

The clip-path method uses a single element whose background is clipped to a custom polygon that outlines both the arrow head and shaft. It’s clean, scalable, and doesn’t require pseudo-elements.

How to Center Content Inside an Arrow Up

The simplest way is to turn the arrow container into a Flexbox or Grid formatting context and center children with one or two properties.

Method 1: Use CSS Flexbox

.arrow-up,
.arrow-up-clip {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

.arrow-up,
.arrow-up-clip {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Method 2: Use CSS Grid

.arrow-up,
.arrow-up-clip {
  display: grid;
  place-items: center; /* shorthand for centering both axes */
}

.arrow-up,
.arrow-up-clip {
  display: grid;
  place-items: center; /* shorthand for centering both axes */
}

When to Use Each Shape Method

Use the border + rectangle method for broad browser support and simple arrows with adjustable head/shaft sizes via border thickness and element dimensions. Choose clip-path for a single-node, easily scalable arrow with precise control over proportions; note that clip-path requires modern browser support and can clip overflowed child content.

Quick Customizations

Change the arrow color by updating background (for shaft/clip-path) and the colored border (for the triangle head). To thicken or slim the arrow, adjust the shaft’s width/height or tweak the clip-path polygon percentages; add a subtle border or shadow by wrapping the arrow in a container and styling that container.

Accessibility & SEO

If the arrow is decorative, add aria-hidden=”true”; if it conveys meaning (e.g., “Scroll up”), include a visible label or an aria-label on a parent control.