CSSで三角形を表現する3つの方法！border、clip-path、SVGを使った方法を解説

CSSを使って三角形を作成することは、ツールチップの吹き出しやリストのアイコンなど、Webデザインの現場で非常に頻繁に登場するテクニックです。

この記事では、定番のborder（境界線）、モダンなclip-path、そして最も自由度の高いSVGの3つの手法を分かりやすく解説します。

borderプロパティを使った方法

古くから使われている最も一般的な方法です。ボックスの「幅と高さを0」にし、隣り合う境界線（border）の一部を透明にすることで三角形を表現します。

原理の仕組み

太いborderを設定すると、境界線同士が45度で接します。この性質を利用して、1辺だけに色を付け、他を transparent（透明）にすることで三角形に見せています。

サンプルコード

CSS

.triangle-border {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3498db; /* ここが三角形の色と高さ */
}

実際に使う際は、以下のように実装します。

<h2 class="heading">ここに見出しが入ります。</h2>

.heading {
  position: relative;
  padding: 8px 16px;
  background-color: #000;
  color: #fff;
  font-size: 18px;
}
.heading::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 100%;
 /* ここから下が三角形のCSS */
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #000;
}

Preview

よく使われる方法ですが、透明な部分があるため三角形がリンクやボタンになっている場合、透明の部分までクリック可能領域になってしまうデメリットがあります。

clip-pathプロパティを使った方法

clip-pathは要素を好きな形に「切り抜く」プロパティです。もっともモダンで、レスポンシブなデザインとも相性が良い方法です。

原理の仕組み

polygon() 関数を使い、三角形の頂点となる3点の座標（X軸 Y軸）を指定します。

サンプルコード

CSS

.triangle-clip {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  /* 頂点(50% 0%)、左下(0% 100%)、右下(100% 100%)を結ぶ */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

実際に使う場合は、以下のように実装します。

<h2 class="heading">ここに見出しが入ります。</h2>

.heading {
  position: relative;
  padding: 8px 16px;
  background-color: #000;
  color: #fff;
  font-size: 18px;
}
.heading::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 100%;
  width: 14px;
  height: 8px;
  background-color: #000;
  /* 左上（0% 0%）、右上（100% 0%）、頂点（50% 100%）を結ぶ線で切り抜いています */
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

Preview

clip-pathについては以下の記事で解説しているの参考にしてください。

参考記事：【CSS】clip-pathの使い方！polygon、inset、circleなどの値について解説 – Webool

SVGを使った方法

複雑な装飾や、拡大してもボケない精密な三角形が必要な場合はSVGが最適です。HTMLに直接記述できるため、管理も簡単です。

サンプルコード

<svg width="100" height="100" viewBox="0 0 100 100">
  <polygon points="50,15 90,85 10,85" fill="#2ecc71" />
</svg>

Preview

SVGはCSSでサイズや色を自由に変えられるので拡張性が高いというメリットがあります。

デメリットとしては、デザインソフトやツールで生成するのが一般的（手打ちで作成するのは高難易度）なので、手間がかかります。

クリック可能領域の違い

borderとclip-pathでは、クリック可能領域が異なります。

<p><a href="#" class="triangle1" aria-label="SAMPLE"></a></p>
<p><a href="#" class="triangle2" aria-label="SAMPLE"></a></p>

.triangle1 {
  display: inline-block;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 50px solid #000;
}

.triangle2 {
  display: inline-block;
  width: 60px;
  height: 50px;
  background-color: #000;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Preview

PCで読まれている方は、上の三角形の周りにマウスカーソルを当ててみてください。

borderで描いた上の三角形は透明部分がクリックできてしまうのに対し、clip-pathは切り抜かれた範囲しかクリックできません。

上の三角形は直感的ではなく、誤操作を誘発してしまう可能性もあります。

このことから、clip-pathを使った三角形の表現は覚えておいた方が良いでしょう。

結局どれを使えばいい？（比較表）

状況に合わせて最適なものを選びましょう。

手法	おすすめの用途	柔軟性	難易度
border	シンプルな吹き出し、矢印	低	低
clip-path	レイアウトの一部、背景の切り抜き	高	中
SVG	アイコン、複雑なアニメーション	最高	中