CSSだけで三角形を作る方法｜borderとclip-pathの作り方【2026年版】

CSSだけで三角形を作る方法を紹介します。

画像を使ってもいいのですが、CSSで作ると少しだけ表示が軽くなりますし、あとから色やサイズを変えたくなったときもコードを少しいじるだけで済みます。

この記事では、昔から定番のborderを使った作り方に加えて、2026年現在の主要ブラウザならすべて使えるclip-pathを使ったモダンな作り方もあわせて紹介します。用途に合わせて選んでください。

borderで作る正三角形

まずは正三角形です。色やサイズは用途に合わせて調整してください。

ポイントは、透明にする左右のborderと、色を付ける下のborderの比率です。正三角形（3辺が等しく、各角が60度）にするには、透明なborderを50pxにしたとき、色付きのborderはその約1.73倍（50×√3≒87px）にします。ここを同じ50pxにすると、見た目は正三角形ではなく頂角90度の二等辺三角形になってしまうので注意してください。

上向き正三角形

CSS

.triangle-1 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 87px solid #1E90FF;
}

HTML

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

右向き正三角形

CSS

.triangle-2 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 87px solid #1E90FF;
}

HTML

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

左向き正三角形

CSS

.triangle-3 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 87px solid #1E90FF;
}

HTML

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

下向き正三角形

CSS

.triangle-4 {
  width: 0;
  height: 0;
  border-top: 87px solid #1E90FF;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

HTML

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

borderで作る二等辺三角形

次に二等辺三角形の作り方です。実際の制作では、正三角形よりこちらのほうが使う機会が多いかもしれません。

といっても特別なことはなく、透明なborderと色付きborderの比率を変えるだけです。透明な左右のborderを小さくすれば細く尖った三角形に、大きくすれば平たい三角形になります。下の例では左右40px・高さ50pxにして、正三角形より少し縦長にしています。

上向き二等辺三角形

CSS

.triangle-5 {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 50px solid #1E90FF;
}

HTML

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

右向き二等辺三角形

CSS

.triangle-6 {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 50px solid #1E90FF;
}

HTML

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

左向き二等辺三角形

CSS

.triangle-7 {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-right: 50px solid #1E90FF;
}

HTML

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

下向き二等辺三角形

CSS

.triangle-8 {
  width: 0;
  height: 0;
  border-top: 50px solid #1E90FF;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

HTML

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

clip-pathで作る方法【2026年版】

borderを使う方法は昔からの定番ですが、2026年現在はclip-pathを使う方法も主要ブラウザすべてで問題なく使えます。こちらのほうが直感的で、応用も効きます。

clip-pathのpolygon()は、図形の頂点を「左上を0% 0%とした座標」で指定して、その内側だけを表示する仕組みです。上向きの三角形なら、頂点は「上の中央（50% 0）」「右下（100% 100%）」「左下（0 100%）」の3点です。

CSS

.triangle-clip {
  width: 100px;
  height: 87px;
  background: #1E90FF;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

HTML

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

向きを変えたいときは、頂点の座標を入れ替えるだけです。下向きならpolygon(0 0, 100% 0, 50% 100%)、右向きならpolygon(0 0, 100% 50%, 0 100%)のように指定します。

borderを使う方法と比べたときのclip-pathの利点は、次のとおりです。

widthとheightで素直にサイズを指定できる（borderの数値の足し算を考えなくてよい）
backgroundが使えるので、グラデーションや背景画像を三角形に切り抜ける
座標を変えるだけで、正三角形でも、いびつな三角形でも自由に作れる
transformの回転とも相性がよい

一方で、ごく単純な三角形を1つ置きたいだけならborderのほうが手軽な場面もあります。

まとめ｜どちらを使う？

borderとclip-pathの2通りを紹介しました。ざっくりの使い分けは次のとおりです。

単純な三角形をさっと置きたい → borderの方法
背景色や画像を乗せたい・複雑な形・回転させたい → clip-pathの方法

なお、今回はサンプルとして空のdivタグを使っていますが、空の要素を置くのは本来あまりよろしくありません。実際のデザインに組み込むときは、::beforeや::afterなどの疑似要素で三角形を作ると、余計なタグを増やさずに済みます。吹き出しの三角形やアコーディオンの矢印などは、この疑似要素の方法で作るのが定番です。

三角形が作れるようになると、円や四角と組み合わせてアイコンを作ったり、吹き出しを作ったりと、デザインの幅が広がります。ぜひ活用してみてください。