How to Make a Right-Angled Triangle with CSS

Learn two reliable ways to draw a crisp right‑angled triangle with pure CSS, great for pointers, badges, and decorative accents, with copy‑paste code you can adapt in seconds.

Live Preview: Right-Angled Triangle

Method 1: Using CSS clip-path

.right-triangle {
  width: 150px;
  height: 150px;
  background: #cd5454;
  /* Right angle at the top-left corner */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Example centering on the page (optional) */
.right-triangle {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Method 2: Using Borders (zero-size element)

.right-triangle {
  width: 0;
  height: 0;
  /* Right angle at the top-left corner */
  border-top: 150px solid #cd5454;       /* horizontal leg */
  border-right: 150px solid transparent; /* hypotenuse side */
}

/* Example centering on the page (optional) */
.right-triangle {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

How This Works

The clip-path method draws a triangle by “cutting” a rectangular box to a three-point polygon. Because the element keeps its real width and height, you can place and align content inside it (see the centroid-based positioning below to avoid clipping).

The border method uses a zero-width/height box where one border is colored and an adjacent border is transparent, forming a right-angled wedge. It has a zero-size box, so it can’t contain normal flow content; use it as a decorative paint-only shape (you could absolutely position children relative to it if needed).

How to Center Content Inside a Right-Angled Triangle

For the triangle polygon(0 0, 100% 0, 0 100%), “50%/50% center” lies on the hypotenuse, so content will be partially clipped. Instead, place your content at the triangle’s centroid, which sits one third of each leg from the right angle. The snippets below use the clip-path version.

Method 1: Grid + centroid offset (fixed size)

.right-triangle {
  width: 180px;
  height: 180px;
  background: #cd5454;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  color: #fff;

  /* Enable positioned child and avoid default center-on-hypotenuse */
  position: relative;
  display: grid;
  place-items: start; /* no centering here */
}

.right-triangle > .content {
  position: absolute;
  top: 33.333%;
  left: 33.333%;
  transform: translate(-50%, -50%); /* center the content box on the centroid point */
}

<div class="right-triangle">
  <div class="content">Centered label</div>
</div>

Method 2: Grid + centroid offset (responsive with CSS variables)

.right-triangle {
  --size: 12rem; /* change once, size and offsets follow */
  width: var(--size);
  height: var(--size);
  background: #cd5454;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  color: #fff;

  position: relative;
  display: grid;
  place-items: start;
}

.right-triangle > .content {
  position: absolute;
  top: calc(100% / 3);
  left: calc(100% / 3);
  transform: translate(-50%, -50%);
}

When to Use Each Shape Method

Use clip-path when you need a scalable triangle that can contain content, respond to layout changes, and animate. Use the border method when you want a tiny, paint-only triangle for decorative corners or pointers and don’t need normal flow children inside (absolutely positioned children are possible but uncommon).

Quick Customizations

Change the color via background (clip-path) or the colored border (borders). Flip the triangle by reordering polygon points (clip-path) or by switching which border is colored/transparent (borders); adjust the size by changing width/height (clip-path) or border widths (borders).

Accessibility & SEO

If the triangle is purely decorative, add aria-hidden=”true”; if it conveys meaning, ensure sufficient color contrast and include accessible text nearby.