How to Make a Triangle (Right) with CSS

Want a clean right-pointing triangle without images? Here are two reliable CSS techniques you can use in seconds.

Live Preview: Triangle (Right)

Method 1: Using Borders

.triangle-right-border {
  /* Visual size variables */
  --w: 120px; /* triangle width (equals border-left width) */
  --h: 75px;  /* triangle half-height (equals top/bottom border widths) */

  width: 0;
  height: 0;
  border-top: var(--h) solid transparent;
  border-bottom: var(--h) solid transparent;
  border-left: var(--w) solid #cd5454; /* triangle color */
}

/* Visual centering:
   Because the element's width is 0, margin: auto won't center the shape.
   Offset by half the triangle width instead. */
.triangle-right-border.centered {
  position: relative;
  left: 50%;
  transform: translateX(calc(-0.5 * var(--w)));
}

/* Optional shadow for border triangle */
.triangle-right-border.shadow {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

Method 2: Using clip-path (CSS Shapes)

.triangle-right-clip {
  width: 150px;
  height: 150px;
  background: #cd5454;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Center the element if needed (works here because it has width) */
.triangle-right-clip.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Shadow for clipped shapes: use drop-shadow (box-shadow is clipped away) */
.triangle-right-clip.shadow {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

How This Works

The border method sets a zero-sized box and uses thick borders; the top and bottom borders are transparent while the left border is colored, producing a right-pointing triangle. Adjusting the border widths changes the triangle’s size and proportions. Note that since the element’s width is 0, margin: auto will not visually center the triangular shape; use the offset technique shown above (left: 50% with a translateX of half the border-left width) or absolutely position it inside a wrapper.

The clip-path method starts with a regular rectangular element and clips it to a triangular polygon. This preserves a content box, making it easy to size, animate, and place text or icons inside.

How to Center Content Inside a Triangle (Right)

Flexbox or Grid is the easiest way to center content, but note that the border-made triangle has no internal content area. Use the clip-path version (or an SVG) when you need to place text or icons inside.

Method 1: Use CSS Flexbox

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

.triangle-right-clip > span {
  color: #fff;
  font: 14px/1.2 sans-serif;
  text-align: center;
}

Method 2: Use CSS Grid

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

When to Use Each Shape Method

Use borders for the simplest, most lightweight triangle when you do not need inner content or effects. Use clip-path when you need a real box for content, responsive sizing with width/height, transitions, or transforms. For shadows on clipped shapes, prefer filter: drop-shadow(…) or apply the shadow to a wrapper or pseudo-element. For hit-testing, clip-path restricts pointer events to the visible polygon. Border triangles can have a larger, non-intuitive hit area because transparent borders still capture events; if that’s a concern, attach interactivity to a wrapper or set pointer-events: none on a decorative triangle.

Quick Customizations

  • Change color by editing border-left (border method) or background (clip-path method).
  • Adjust size by tweaking border widths (border method) or width/height (clip-path).
  • Shadows: box-shadow on a clipped element is itself clipped and won’t create a natural outer shadow. Use filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)) on the triangle element, or apply a normal box-shadow to a wrapper/pseudo-element.
  • Transforms (e.g., rotate) work well with the clip-path approach.
  • Hit-testing & interactivity: Transparent borders still capture pointer events. Clip-path limits events to the visible shape. For decorative shapes, you can use pointer-events: none; for interactive shapes, add listeners to a wrapper or use clip-path/SVG.

Accessibility & SEO

If the triangle is purely decorative, add aria-hidden=”true”. If the triangle conveys meaning and has no meaningful child content, role=”img” with an aria-label can be used, but an inline SVG with a <title> is often a better, more explicit way to provide an accessible name. If the triangle contains text or icons (like the clip-path examples), do not give that container role=”img” because it hides descendants from assistive technologies, allow the inner content to be read normally.