CSS 三角形の作り方

上向き

.triangle-up {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

下向き

.triangle-down {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
}

右向き・左向き

.triangle-right {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.triangle-left {
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

ポイントと注意点

• clip-path と border の違い：clip-path は中身を切り抜くので背景画像やテキスト入りの三角形が作れます。border方式は色だけの三角形です。
• 角度：頂点のX座標（上向きの 50%）をずらすと傾きが変わります。要素の幅・高さでも見た目が変わります。
• 微調整は clip-path ジェネレーター の「三角形」プリセットから頂点をドラッグすると簡単です。

関連