How to Make an Arrow (Down) with CSS

Learn two quick ways to create a clean, scalable down arrow using pure CSS, perfect for icons, callouts, and UI indicators. Copy the snippets below and customize the size and color in seconds.

Live Preview: Down Arrow

Method 1: Using Borders (Triangle)

.arrow-down {
  /* Creates a triangle pointing down */
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid #cd5454; /* arrow color */
  /* Optional centering if used as a block element */
  margin: 0 auto;
}

.arrow-down {
  /* Creates a triangle pointing down */
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid #cd5454; /* arrow color */
  /* Optional centering if used as a block element */
  margin: 0 auto;
}

Method 2: Using clip-path (Arrow With Shaft)

.arrow-down-clip {
  width: 140px;
  height: 140px;
  background: #cd5454;
  -webkit-clip-path: polygon(40% 0, 60% 0, 60% 60%, 80% 60%, 50% 100%, 20% 60%, 40% 60%);
  clip-path: polygon(40% 0, 60% 0, 60% 60%, 80% 60%, 50% 100%, 20% 60%, 40% 60%);
  display: block;
  margin: 0 auto; /* center horizontally */
}

.arrow-down-clip {
  width: 140px;
  height: 140px;
  background: #cd5454;
  -webkit-clip-path: polygon(40% 0, 60% 0, 60% 60%, 80% 60%, 50% 100%, 20% 60%, 40% 60%);
  clip-path: polygon(40% 0, 60% 0, 60% 60%, 80% 60%, 50% 100%, 20% 60%, 40% 60%);
  display: block;
  margin: 0 auto; /* center horizontally */
}

How This Works

The border technique sets an element to zero width/height, then uses thick borders where only one side is colored; that colored side becomes the visible triangular arrow head.

The clip-path method draws a custom polygon that includes both the shaft and the head, letting you use a background color and place content inside while scaling smoothly with width/height.

How to Center Content Inside a Down Arrow

Flexbox or Grid is the easiest way to center text/icons inside the arrow. Note: this works with the clip-path version (since it has an interior area); the border-triangle version has no content box.

Method 1: Use CSS Flexbox

.arrow-down-clip {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow-down-clip {
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid

.arrow-down-clip {
  display: grid;
  place-items: center;
}

.arrow-down-clip {
  display: grid;
  place-items: center;
}

When to Use Each Shape Method

Use the border triangle for super-lightweight icons and simple indicators; it’s widely supported and easy to size by adjusting border widths. Use the clip-path arrow when you need a full arrow (shaft + head), scalable dimensions, backgrounds, and the ability to center content inside.

Quick Customizations

Change the color by editing the border-top color (Method 1) or background (Method 2). Resize by increasing border widths (Method 1) or width/height (Method 2). For a thicker shaft with clip-path, adjust the polygon percentage coordinates.

Accessibility & SEO

If the arrow is decorative, add aria-hidden=”true” to the element; if it conveys meaning, pair it with descriptive text for screen readers.