How to Make a Triangle (Down) with CSS

Learn two reliable CSS techniques to create a clean, downward-pointing triangle and see a live preview, complete with simple centering options and quick customization tips.

Live Preview: Triangle (Down)

Method 1: Using Borders

.triangle-down {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-top: 130px solid #cd5454; /* color of the triangle */
  display: block;                  /* easy centering */
  margin-left: auto;
  margin-right: auto;
}

.triangle-down {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-top: 130px solid #cd5454; /* color of the triangle */
  display: block;                  /* easy centering */
  margin-left: auto;
  margin-right: auto;
}

Method 2: Using clip-path (Polygon)

.triangle-down-clip {
  width: 150px;
  height: 130px;
  background: #cd5454;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); /* downward triangle */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: block;  /* easy centering */
  margin-left: auto;
  margin-right: auto;
}

.triangle-down-clip {
  width: 150px;
  height: 130px;
  background: #cd5454;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); /* downward triangle */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: block;  /* easy centering */
  margin-left: auto;
  margin-right: auto;
}

How This Works

The border method sets a zero-sized box and uses thick borders; only the top border is colored, so the visible portion forms a triangle pointing downward, while the left and right borders are transparent to define the base width.

The clip-path method starts with a normal box and clips it to a triangle using a polygon. This preserves a real content box, making it easier to place and center text or icons inside the shape.

How to Center Content Inside a Triangle (Down)

Using Flexbox or Grid on the triangle container is the easiest way to center content. Note: the border-based triangle has no content area, so use the clip-path version when you need inner content.

Method 1: Use CSS Flexbox

.triangle-down-clip {
  width: 160px;
  height: 140px;
  background: #cd5454;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangle-down-clip span {
  color: #fff;
  font: 600 14px/1.2 system-ui, sans-serif;
}

.triangle-down-clip {
  width: 160px;
  height: 140px;
  background: #cd5454;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangle-down-clip span {
  color: #fff;
  font: 600 14px/1.2 system-ui, sans-serif;
}

Method 2: Use CSS Grid

.triangle-down-clip {
  width: 160px;
  height: 140px;
  background: #cd5454;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: grid;
  place-items: center;
}

.triangle-down-clip span {
  color: #fff;
  font: 600 14px/1.2 system-ui, sans-serif;
}

.triangle-down-clip {
  width: 160px;
  height: 140px;
  background: #cd5454;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: grid;
  place-items: center;
}

.triangle-down-clip span {
  color: #fff;
  font: 600 14px/1.2 system-ui, sans-serif;
}

When to Use Each Shape Method

Use the border method for ultra-lightweight, widely supported decorative triangles (e.g., carets, pointers) when no inner content is needed. Choose clip-path when you need a real content box, responsive scaling, transforms, or to place and center text/icons inside the triangle.

Quick Customizations

Change the color by updating border-top in the border method or background in the clip-path method; adjust size by changing the border widths (border method) or width/height (clip-path). For a subtle shadow with clip-path, add filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)).

Accessibility & SEO

If the triangle is purely decorative, mark it aria-hidden=”true” in HTML; if it conveys meaning, include accessible text (e.g., visually hidden label) describing its purpose.