ZeroTool Workbench
CSS 三角形ジェネレーター
border hackを使って任意の方向のCSS三角形を生成。方向・サイズ・色を選ぶだけで即座にCSSコードを生成。無料オンラインツール。
使い方
- 3×3の方向グリッドのボタンをクリックして、三角形が向く方向を選択します。
- 幅と高さをピクセルで設定して三角形のサイズを調整します。
- カラーピッカーを使うか、十六進数の色値を直接入力して色を選択します。
- ライブプレビューはコントラストのある背景で即座に更新され、ライト/ダークモード両方で三角形を明確に確認できます。
- CSSブロック横のコピーをクリックして
.triangle { … }ルールをコピーするか、HTML使用例を別途コピーします。
生成されるCSSについて
生成されるルールは常に width: 0 と height: 0 から始まります。
基本方向（上・右・下・左）では、2つの透明なborderが三角形の底辺の幅を定義し、1つの実色borderが高さを定義します。
角方向（例：左上）では、1つの実色borderと1つの透明なborderがコーナーから直角三角形を形成します。
出力をスタイルシートに貼り付け、.triangleを独自のクラス名に変更してください。
主な使用例
CSS三角形は、ツールチップの矢印、ドロップダウンのキャレット、装飾的なセクション区切り、 パンくずリストの区切り、吹き出しのテールなどに使われます。 画像を使用しない純粋なCSSのため、即座に読み込まれ、CSS変数でテーマ設定も容易です。
FAQ
CSS 三角形のトリックはどのように機能しますか？
CSS三角形は要素のwidthとheightを0に設定し、borderを使って形を作ります。隣接するborderが透明な角度で交差すると、三角形が形成されます。例えば、左右を透明なborderにして下だけ実色のborderにすると、上向きの三角形ができます。
CSS三角形のborder hackとは何ですか？
border hackは要素のサイズを0に設定し、borderを選択的に適用する手法です。実色のborderが見える辺を、透明なborderが見えない辺を形成します。各borderのサイズが三角形の幅と高さを制御します。画像やSVGを必要としない純粋なCSS技術です。
各方向でwidthとheightは何を制御しますか？
上下の三角形では、widthが横の全幅を、heightが三角形の高さを設定します。左右の三角形では、widthが三角形の延長幅を、heightが縦の全高を設定します。角方向（例：左上）では、widthとheightが両方とも、三角形を切り取る角の正方形のサイズを制御します。
CSSトライアングルとSVGトライアングル、どちらを使うべきですか？
CSS三角形は外部アセットが不要で、ツールチップの矢印、バッジ、ポインター、区切り線などの小さな装飾に最適です。SVG三角形は任意の回転、グラデーション、任意のスケールが必要な場合に適しています。シンプルな方向指示には、CSS border hackが最もシンプルで軽量な選択肢です。
CSS三角形はダークモードで使えますか？
はい。三角形はborderで形成されるため、CSSカスタムプロパティやダークモードのメディアクエリでborderの色を上書きできます。例えば、色の値にCSS変数を使うことで、ライト/ダークテーマ間で自動的に切り替わります。