【2026年版】CSSで三角形を作る方法｜border技法・吹き出し・矢印をコピペ

2026年7月14日

CSSで三角形を作りたいと思ったことはありませんか？吹き出しのしっぽ、矢印アイコン、アコーディオンの開閉マーク——Webデザインの現場では三角形の出番が非常に多く、「どうやって実装すればいいのか」と悩む方は少なくありません。画像を使えば手軽ですが、解像度の問題やHTTPリクエストの増加など、パフォーマンス面でのデメリットが生じます。CSSだけで三角形が作れれば、画像ファイル不要・コード一発でサイズや色を自由に変更できます。

この記事では、CSSで三角形を作るすべての主要な手法を体系的に解説します。古典的なborderトリックから、モダンなclip-pathまで、コピペしてすぐに使えるコードを豊富に掲載しています。「とりあえず三角形が欲しい」という方から「仕組みをちゃんと理解したい」という方まで、どちらのニーズにも応えられる構成です。

2026年現在、主要ブラウザはすべてclip-pathに対応しています。border技法の基本を押さえたうえで、よりモダンな実装方法も習得しておくと、現場での応用の幅が大きく広がります。それでは、基礎から順を追って解説していきます。

先に、この記事の結論をまとめます。

CSSで三角形を作る最も基本的な手法は、要素のwidthとheightを0にしてborderの太さと色を操作するborder技法です。
上下左右の4方向の三角形は、透明にするborderの辺を変えるだけで切り替えられます。
吹き出しのしっぽは、本体要素の::beforeまたは::after疑似要素にborder三角形を配置することで実現できます。
clip-path: polygon() を使うモダンな方法は、任意の形状・角度の三角形を直感的に作れて、アニメーションにも対応しています。
矢印・アコーディオン・リスト装飾などの応用では、border技法とclip-pathを使い分けると実装がシンプルになります。

CSSで三角形が作れる仕組み

CSSの三角形を理解するには、まずborderがどのように描画されるかを知る必要があります。通常のボックス要素にborderを設定すると、上下左右の4辺がそれぞれ台形として描画されています。要素のサイズが大きい場合は台形が細くなって「線」に見えますが、実際には隣接する辺と斜めに接合された台形です。

ここで重要な発見があります。要素のwidthとheightを両方とも0にすると、4辺の台形がすべて中心の1点に向かって収束し、それぞれが「三角形」になります。この状態で3辺を透明（transparent）にして1辺だけ色を付けると、その三角形だけが見えるようになります。これがborderを使ったCSS三角形の原理です。

具体的な例で確認しましょう。以下のコードを見てください。

/* 最もシンプルな三角形（上向き） */
.triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 50px solid #d16176;
}

このコードでは、左右のborderを透明にして、下のborderだけにピンク色を付けています。幅0・高さ0の要素の中心に向かって下側のborderが三角形を形成し、左右のborderは透明なので見えません。結果として上を向いた三角形が表示されます。borderの太さが三角形のサイズを決めるので、値を変えるだけで大きさや縦横比を自由に調整できます。

なぜ「border-bottom」で「上向き三角形」になるのか、最初は混乱しがちです。考え方のコツは「残したい色の辺の反対方向に三角形の頂点が向く」と覚えることです。border-bottomに色を付けると、その台形の底辺（下側）が残り、頂点は上を向きます。

上・下・左・右の三角形の作り方

4方向すべての三角形を作る方法を見ていきましょう。基本的なルールは「色を付ける辺の反対側に頂点が向く」です。

上向き三角形

/* 上向き三角形 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 60px solid #d16176;
}

下向き三角形

/* 下向き三角形 */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 60px solid #d16176;
}

左向き三角形

/* 左向き三角形 */
.triangle-left {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-right: 60px solid #d16176;
}

右向き三角形

/* 右向き三角形 */
.triangle-right {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 60px solid #d16176;
}

4方向の三角形をまとめてHTMLで使う場合のサンプルも載せておきます。

<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>

サイズの調整方法を整理しておきます。左向き・右向き三角形では、上下のborderの値が「三角形の高さ（左右幅の半分）」になり、左右どちらかのborderの値が「三角形の奥行き（高さ）」になります。上向き・下向きは逆に、左右のborderが横幅の半分、上下のborderが縦の長さになります。

三角形の向き	色を付けるborder	透明にするborder
上向き	border-bottom	border-left / border-right
下向き	border-top	border-left / border-right
左向き	border-right	border-top / border-bottom
右向き	border-left	border-top / border-bottom

直角三角形・斜め三角形の作り方

border技法では、2辺のborderに色を付けることで直角三角形（斜めの辺がある三角形）を作ることもできます。また、上下左右のborderサイズを非対称にすることで、任意の角度に近い三角形を表現できます。

直角三角形（左上に直角）

/* 左上に直角がある三角形 */
.triangle-topleft {
  width: 0;
  height: 0;
  border-top: 80px solid #d16176;
  border-right: 80px solid transparent;
}

直角三角形（右上に直角）

/* 右上に直角がある三角形 */
.triangle-topright {
  width: 0;
  height: 0;
  border-top: 80px solid #d16176;
  border-left: 80px solid transparent;
}

直角三角形（左下に直角）

/* 左下に直角がある三角形 */
.triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 80px solid #d16176;
  border-right: 80px solid transparent;
}

直角三角形（右下に直角）

/* 右下に直角がある三角形 */
.triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 80px solid #d16176;
  border-left: 80px solid transparent;
}

縦横比を変えた細長い三角形

左右のborderと上下のborderの比率を変えることで、細い三角形や横に広い三角形を作れます。

/* 縦長の細い三角形（上向き） */
.triangle-slim {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 80px solid #d16176;
}

/* 横に広い三角形（上向き） */
.triangle-wide {
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 30px solid #d16176;
}

border技法では完全な任意角度の三角形は難しいですが、左右のborder幅と上下のborder幅の比率を変えることで、さまざまな形状を近似できます。正確な角度指定が必要な場合はclip-path（後述）を使いましょう。

吹き出し（ふきだし）を三角形で作る

Webデザインでよく使われる吹き出し（ふきだし）は、長方形の本体と三角形のしっぽを組み合わせた形です。CSSでは本体要素の::beforeまたは::after疑似要素に三角形を配置することで、画像なしで実装できます。

基本の吹き出し（下にしっぽ）

<div class="balloon">こんにちは！</div>

/* 下にしっぽが出る吹き出し */
.balloon {
  position: relative;
  display: inline-block;
  background-color: #EFBDB7;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 16px;
  color: #51322b;
}

.balloon::after {
  content: "";
  position: absolute;
  bottom: -20px;       /* 本体の下に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #EFBDB7;
}

上にしっぽが出る吹き出し

/* 上にしっぽが出る吹き出し */
.balloon-top {
  position: relative;
  display: inline-block;
  background-color: #EFBDB7;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 16px;
  color: #51322b;
  margin-top: 20px;  /* しっぽ分の余白 */
}

.balloon-top::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid #EFBDB7;
}

左にしっぽが出る吹き出し（チャット風）

/* 左にしっぽが出る吹き出し */
.balloon-left {
  position: relative;
  display: inline-block;
  background-color: #EFBDB7;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 16px;
  color: #51322b;
  margin-left: 20px;  /* しっぽ分の余白 */
}

.balloon-left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid #EFBDB7;
}

枠線付き吹き出し

吹き出しに枠線を付けたい場合は、::beforeと::afterの2つの疑似要素を重ねて使います。外側（::before）に枠線色の三角形、内側（::after）に背景色の三角形を少しずらして配置する手法です。

/* 枠線付き吹き出し（下にしっぽ） */
.balloon-bordered {
  position: relative;
  display: inline-block;
  background-color: #fff;
  border: 2px solid #d16176;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 16px;
  color: #51322b;
}

/* 外側の三角形（枠線色） */
.balloon-bordered::before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 24px solid #d16176;
}

/* 内側の三角形（背景色） */
.balloon-bordered::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #fff;
}

疑似要素を2枚重ねる方法は、::beforeが::afterより2pxほど大きく下に配置されることで、枠線が三角形にも自然につながって見えます。z-indexの調整が必要な場合は本体要素にposition: relative; z-index: 1;を追加してください。

clip-path: polygon() で三角形を作るモダンな方法

clip-path: polygon()は要素を任意の多角形にくり抜くCSSプロパティです。border技法と違い、要素自体に幅・高さを持たせたまま三角形に見せることができます。座標を直接指定するため任意の角度を正確に表現でき、CSSトランジションでアニメーション化も可能です。

基本構文と座標の考え方

polygon()の座標は「左上を原点(0%, 0%)とした相対座標」で指定します。右下が(100%, 100%)です。三角形は3点の座標で指定します。

/* 上向き三角形（clip-path使用） */
.triangle-clip-up {
  width: 0;         /* clip-pathの場合は幅・高さを設定する */
  width: 100px;
  height: 100px;
  background-color: #d16176;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  /* 頂点(上中央), 左下, 右下 */
}

4方向の三角形（clip-path版）

/* 上向き三角形 */
.clip-up {
  width: 100px;
  height: 100px;
  background-color: #d16176;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 下向き三角形 */
.clip-down {
  width: 100px;
  height: 100px;
  background-color: #d16176;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

/* 左向き三角形 */
.clip-left {
  width: 100px;
  height: 100px;
  background-color: #d16176;
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}

/* 右向き三角形 */
.clip-right {
  width: 100px;
  height: 100px;
  background-color: #d16176;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

任意角度の三角形

clip-pathの大きな利点は任意の座標を指定できることです。例えば「少し右に傾いた三角形」なども簡単に作れます。

/* 非対称な三角形（頂点が右寄り） */
.clip-asymmetric {
  width: 120px;
  height: 100px;
  background-color: #d16176;
  clip-path: polygon(70% 0%, 0% 100%, 100% 100%);
}

/* 直角三角形（左下に直角） */
.clip-right-angle {
  width: 100px;
  height: 100px;
  background-color: #d16176;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}

clip-pathでアニメーションを付ける

clip-pathはCSSトランジションの対象になります。形状をモーフィングさせる演出が可能です。

/* ホバーで三角形が回転するような変形 */
.clip-animated {
  width: 100px;
  height: 100px;
  background-color: #d16176;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transition: clip-path 0.4s ease;
}

.clip-animated:hover {
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  /* 上向き → 下向きにアニメーション */
}

border技法ではtransitionによるモーフィングはできません。アニメーションが必要な場面ではclip-pathを選択しましょう。ブラウザサポートは2026年現在、すべての主要ブラウザ（Chrome/Firefox/Safari/Edge）で対応済みです。

三角形の応用（矢印・アコーディオン・リスト装飾）

実際のWebサイトで三角形が使われる場面は多岐にわたります。代表的な応用例をコードつきで紹介します。

矢印アイコンをCSSで作る

ボタンの右端に表示する矢印は、border技法の三角形に本体のborder（テキストの下線・右線）を組み合わせる方法も便利ですが、シンプルな三角形矢印も広く使われます。

<a class="btn-arrow" href="#">詳しく見る <span class="arrow"></span></a>

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #d16176;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
}

.btn-arrow .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
}

アコーディオンの開閉マーク

FAQ・アコーディオンUIでよく使われる「開いているとき▲・閉じているとき▼」の切り替えをCSSだけで実装する例です。

<details class="accordion">
  <summary class="accordion-title">質問のテキストがここに入ります</summary>
  <div class="accordion-body">回答のテキストがここに入ります。</div>
</details>

.accordion {
  border: 1px solid #EFBDB7;
  border-radius: 4px;
  margin-bottom: 8px;
}

.accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  color: #51322b;
}

/* デフォルトの▶マークを消す */
.accordion-title::-webkit-details-marker { display: none; }

/* 閉じているとき：下向き三角形 */
.accordion-title::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #d16176;
  transition: transform 0.3s ease;
}

/* 開いているとき：上向き三角形（回転で実現） */
.accordion[open] .accordion-title::after {
  transform: rotate(180deg);
}

.accordion-body {
  padding: 0 20px 16px;
  color: #51322b;
  font-size: 15px;
  line-height: 1.8;
}

リストの装飾（bullet を三角形に）

デフォルトのリストの黒丸（●）を三角形に変えると、デザインにアクセントが加わります。

<ul class="triangle-list">
  <li>リストアイテム1</li>
  <li>リストアイテム2</li>
  <li>リストアイテム3</li>
</ul>

.triangle-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.triangle-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.6;
  color: #51322b;
}

.triangle-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;   /* テキストの行高さに合わせて調整 */
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid #d16176;
}

セクション区切りの三角形（ページデザイン）

セクション間の境界に大きな三角形を置いて、流れるような区切りを表現する手法です。clip-pathを使うと実装がシンプルです。

/* セクション下端に三角形の切り込みを入れる */
.section-cut {
  position: relative;
  background-color: #d16176;
  padding: 60px 0 80px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

/* 上から下への流れるような区切り */
.section-wave {
  width: 100%;
  height: 60px;
  background-color: #EFBDB7;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

よくある質問（FAQ）

Q. border技法とclip-pathはどちらを使うべきですか？

用途によって使い分けるのがベストです。border技法は古くからある手法でブラウザ互換性が非常に高く、シンプルな上下左右の三角形・吹き出しのしっぽに向いています。要素のwidth/heightが0になる点を理解していれば直感的に使えます。clip-pathは任意の座標指定ができ、アニメーション対応・要素に幅と高さを持たせたままくり抜けるメリットがあります。2026年現在は主要ブラウザ全対応なので、新規プロジェクトではclip-pathを積極的に採用するとよいでしょう。

Q. 三角形にグラデーションカラーを付けられますか？

border技法ではborderプロパティにはグラデーションが適用できないため、グラデーション三角形の実装は困難です。clip-pathを使った場合は、要素自体にbackground: linear-gradient()を設定した上でclip-pathでくり抜けば、グラデーション三角形が実現できます。

/* グラデーション三角形 */
.triangle-gradient {
  width: 120px;
  height: 100px;
  background: linear-gradient(135deg, #d16176, #EFBDB7);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Q. 三角形のborderに影（box-shadow）を付けられますか？

border技法の三角形はwidthとheightが0なので、box-shadowは機能しません。代わりにfilter: drop-shadow()を使うと影を付けることができます。clip-pathを使った三角形も同様で、box-shadowはくり抜いた形には追従しませんがfilter: drop-shadow()は有効です。

/* drop-shadowで三角形に影を付ける */
.triangle-shadow {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 60px solid #d16176;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

Q. レスポンシブ対応で三角形のサイズを変えるにはどうすればいいですか？

border技法の三角形はpxで指定するため、メディアクエリで値を上書きするかvwなどの相対単位を使う方法があります。clip-pathはパーセンテージ指定なので要素のwidth/heightをレスポンシブに変化させるだけで三角形も自動的にスケールします。レスポンシブ対応を考慮するなら、clip-pathの方が管理しやすいです。

/* メディアクエリでborder三角形のサイズを調整 */
.triangle-responsive {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 60px solid #d16176;
}

@media (max-width: 640px) {
  .triangle-responsive {
    border-left-width: 25px;
    border-right-width: 25px;
    border-bottom-width: 40px;
  }
}

Q. 吹き出しの三角形（しっぽ）の位置を左端や右端に寄せるにはどうすればいいですか？

疑似要素のleftプロパティの値を変更するだけです。中央に寄せる場合はleft: 50%; transform: translateX(-50%)、左端に寄せる場合はleft: 20px（固定値）、右端に寄せる場合はright: 20pxと指定します。transformを外してleftかrightに直接px値を指定すれば、任意の位置に配置できます。

/* しっぽを左端に寄せる例 */
.balloon-left-tail::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 20px;   /* ← 左端から20pxの位置 */
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #EFBDB7;
}

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

【CSS実装テクニック完全マップ】コピペで使えるWebデザイン実装ガイド総まとめ

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →

この記事を書いた人

田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。