CSSで三角形をつくる

2024-12-13

CSSのclip-pathを利用した三角形のつくりかた、いつも忘れて調べるので、メモとして残しておく。

<div class="triangle"></div>

.triangle {
  background-color: #fff;
  width: 60px;
  height: calc(tan(60deg) * 60px / 2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); /* 上向き */
  clip-path: polygon(0 0, 100% 50%, 0 100%); /* 右向き */
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* 下向き */
  clip-path: polygon(0 50%, 100% 0, 100% 100%); /* 左向き */
}

正三角形

.triangle {
  width: 60px;
  height: calc(60px / 2 * tan(60deg));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

直角二等辺三角形

.triangle {
  width: 60px;
  height: calc(60px / 2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

不等辺三角形

/* 鋭角 */
.triangle {
  width: 60px;
  height: 30px;
  clip-path: polygon(75% 0, 100% 100%, 0 100%);
}

/* 鈍角 */
.triangle {
  width: 60px;
  height: 30px;
  clip-path: polygon(100% 0, 50% 100%, 0 100%);
}

参考）【CSS】borderを使って、三角形作るのはやめませんか？