CSS 三角形ジェネレーター

方向・サイズ・色を選んで純粋なCSSだけで三角形を作り、コードをコピーします。使うのは定番のテクニック——幅も高さもゼロのdivの1辺に実線のボーダー、隣接する2辺に透明なボーダーを設定する方法です。画像ファイルもSVGもclip-pathも不要で、どのブラウザでも理解できる数行のborder宣言だけで済みます。

このツールとは？

CSSには専用の三角形図形がないため、三角形はよく知られた回避策で作られます。幅と高さがゼロの要素を用意し、片側に実線のボーダー、隣接する2辺に透明なボーダーを設定するというものです。隣接するボーダーは45度の角度で交わるため、透明なボーダーは1点に向かって細くなり、色付きのボーダーだけが三角形として見える形で残ります。

このツールはその構造をあなたの代わりに組み立てます——三角形をどの方向に向けるか、どのくらいの大きさにするか、何色にするかを選ぶと、ライブプレビューが更新され、正確なCSSをコピーできます。純粋なCSSだけの矢印、ツールチップの矢印、ドロップダウンメニューの小さな三角形など、Web全体で使われているのと同じ根本的なテクニックです。

出典: CSS Backgrounds and Borders Module Level 3, W3C —— 隣接するボーダーの辺が角度をつけてどのように接するかを定義しており、これがこの三角形テクニックの土台となる仕組みです。

なぜこれを使うのか？

ライブプレビューが実際の三角形をレンダリングするため、コピーする前にサイズ・方向・色を確認できます。
上・下・左・右の4つの基本方向を1つのコントロールでカバーします。
画像ファイルもSVGも不要——この方法で作った三角形はほんの数行のCSSです。
ツールチップの矢印、ドロップダウン/アコーディオンの矢印、カスタムの箇条書き記号、シンプルな装飾図形に便利です。
すべてブラウザ内で完結——設定した内容はどこにもアップロードされません。
無料、登録不要、モバイルでも動作します。

使い方

方向を選びます——どちらの辺に実線ボーダーを設定するかによって、三角形は上・下・左・右のいずれかを指します。
サイズを設定します——この値は3辺すべてのborder-widthに適用され、三角形がどれくらい大きく表示されるかを決めます。
見える側（実線）のボーダーの色を選びます。これが三角形の塗りつぶし色になります。
生成されたCSSをコピーし、width: 0、height: 0の要素に適用します——空の<div>でも、::before/::afterのような擬似要素でもどちらでも問題なく動作します。

例

入力

方向: 下 · サイズ: 60px · 色: #ea580c

出力

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

下向きの三角形の場合、実色はborder-topに設定され、左右のボーダーは透明のままです——三角形が指す方向とは反対側の辺に色を設定します。

幅と高さがゼロであることの重要性

このテクニックが機能するのは、要素自体にコンテンツボックスがないからです——width: 0とheight: 0は、見える図形全体が中心点で交わるボーダーだけから生まれることを意味します。要素に何らかの幅や高さがあると、ボーダーはきれいな1点に収束しなくなり、図形が崩れてしまいます。これが、このテクニックが空の<div>でも、content: ""を持つ::before/::after擬似要素でも同じようにうまく機能する理由です——実際のコンテンツは不要で、ボーダーボックスだけがあれば十分です。

CSSのborderプロパティに関するMDNのドキュメントでは、border-width・border-style・border-colorがどう組み合わさるか、そして隣接する辺のボーダーが対角線上でどう交わるか（developer.mozilla.org/en-US/docs/Web/CSS/border）が説明されています——これがこのテクニック全体を支えている幾何学的な事実です。

CSS三角形の一般的な用途

ツールチップや吹き出しの矢印：角丸ボックスの端に小さな三角形（6〜10px）を配置し、ボックスの背景色に合わせます。
ドロップダウンやselectの矢印：ボタンやselect要素の隣に小さな下向き三角形を置き、メニューが開くことを示します。
アコーディオン/展開インジケーター：セクションが展開されると下を向くように回転する、右向きの三角形。
カスタムリストの箇条書き記号：ブラウザ標準の箇条書き記号の代わりに小さな右向き三角形を使い、より個性的なリストスタイルにします。
シンプルなバナー/リボンの角：カードの角に三角形を差し込み、折り返したリボンのような効果を演出します。

他のCSSツールとの組み合わせ

ツールチップの矢印として使う三角形は、付随するボックスと視覚的になじませるために、対応する影が必要になることが多いです——Box Shadow ジェネレーターでその影を作れます。三角形を超えるUI図形（シェブロン、星、六角形）については、ボーダーテクニックを重ねるよりも、一般的にはclip-pathの方がより優れた現代的なアプローチです。

→ Box Shadow ジェネレーター · Border Radius ジェネレーター

よくある質問

なぜ色は三角形が指す方向とは反対側のボーダーに設定するのですか？

この要素を、中心で交わる4つの三角形のボーダーセグメントからなるダイヤモンドだと想像してください。実色が上のボーダーにある場合、見える図形は上半分を占めます——しかし要素のサイズがゼロであるため、その「上半分」の三角形は実際には下を向きます。これは、存在しないはずの要素のコンテンツボックスがあったであろう位置を指すからです。同じ論理が4つの方向すべてに当てはまります。

正確な二等辺三角形ではない三角形を作れますか？

はい——このツールはシンプルさのため常に対称な三角形を生成しますが、コピーしたCSSは後から手動で編集できます。2つの透明なborder-widthを不均等にすると三角形が片側に傾き、実線ボーダーの幅だけを独立して変えると、底辺の幅に影響を与えずに高さだけが変わります。

このテクニックはすべてのブラウザで動作しますか？

はい——ボーダーベースの三角形テクニックは、border-width・border-style・border-colorという最も基本的なサポートだけに依存しており、これらはCSSの最も初期の実装から存在しています。純粋なCSSの図形テクニックの中でも、最も広く互換性のあるものの一つです。

ボーダーテクニックの代わりにclip-pathを使うべきなのはどんなときですか？

ボーダーテクニックは、追加のプロパティが不要でどこでも動くため、特にシンプルな三角形に最適です。五角形、星形、切り欠きのある矢印、あるいは背景画像を表示したままにする必要がある斜めカットのボックスなど、より複雑なものにはclip-pathの方が柔軟で扱いやすいですが、古いブラウザでのサポートはやや限定的です。

三角形の中にテキストやアイコンを入れられますか？

直接は入れられません——三角形の要素は幅も高さもゼロなので、何かを収めるコンテンツボックスがありません。三角形をテキストやアイコンと組み合わせたい場合は、それを絶対配置する親要素上の装飾的な擬似要素（::before/::after）として使い、親要素の実際のコンテンツは別途スタイリングしてください。