CSS三角形ジェネレーター

ボーダートリック、25年経っても健在の CSS ハック

CSS トライアングル技法は、CSS のボーダー描画アルゴリズムが隣接するボーダーを処理する仕方を悪用します。2つのボーダーが角で出会うとき、それらの間の境界は角を二等分する角度の対角線として描かれます。普通サイズの要素では、角は小さく対角線はほとんど見えません。しかし要素の幅と高さをゼロにし、太いボーダーを与えると、角が視覚空間全体を占め、見えなかった対角線が三角形の見える縁になります。4つのボーダーのうち3つを透明にし、4つ目を色付きにすれば、色付きの辺と反対方向を指す単一の三角形を描いたことになります。この技法は2007年〜2008年頃に Chris Coyier らによる CSS-tricks の初期記事で広く文書化されました。それ以来、Web デザイナーのツールキットの定番となっています。SVG なし、PNG なし、追加の HTTP リクエストなし、複雑な CSS なしで、シャープでスケーラブルで16進カラーで色付け可能な形を生成するからです。数学はシンプルですが直観に反します(三角形の高さは色付き辺のボーダー幅で、底辺は隣接する透明側のボーダー幅の2倍です)。このジェネレーターは計算を代行します。ボーダー幅を計算する代わりにスライダーを動かしてください。

現代の代替手段、clip-path、SVG、conic-gradient

2026年には、ボーダーによる三角形に競合があります。CSS clip-path と polygon() 関数(CSS Masking Module Level 1、2017年からベースラインサポート)を使うと、任意の要素を任意の多角形にクリップできます: clip-path: polygon(50% 0, 100% 100%, 0 100%) は任意の要素に上向きの三角形を描きます。clip-path はより柔軟です(3つだけでなく望むだけの頂点、空の div だけでなくコンテンツを持つ任意の要素で動作)、変形やアニメーションとよりよく合成され、新しい shape() 関数経由で角丸をサポートします。インライン SVG(<svg><polygon points="50,0 100,100 0,100"/></svg>)は最も多くの制御を提供します。アウトライン、塗り、グラデーション、SMIL や CSS によるアニメーション、<title> 要素によるアクセシビリティ。conic-gradient は巧妙に配置されたカラーストップで三角形のような形を生み出せますが、実用的なパターンというより好奇心の対象です。ボーダーによる三角形は、シンプルさとオーバーヘッドのなさが柔軟性より重要な単純な装飾的ケース(ツールチップポインター、ドロップダウンメニューシェブロン、吹き出しの尾)では依然として正しい選択です。clip-path は、三角形がより複雑な形の一部であるとき、テキストを入れる必要があるとき、デザインが角丸を要求する可能性があるときに優れています。

CSS トライアングルが価値を発揮する場面

• ツールチップとポップオーバーのポインター。 ツールチップの吹き出しをアンカー要素につなぐ小さな三角形は最も一般的な用法です。ツールチップ上の擬似要素(::before または ::after)として CSS トライアングルとして構築でき、アンカーに面する縁に配置されます。
• 吹き出しの尾。 チャットバブル、コメントカード、引用ボックスの尖った尾。ツールチップポインターと同じ技法で、より大きく、吹き出しの背景色に合わせてスタイルされます。
• ドロップダウンシェブロンインジケーター。 セレクトリストとドロップダウンボタンの小さな下向き三角形。ネイティブ <select> 要素は OS スタイルのシェブロンを持っていますが、<button> + ポップオーバーで構築されたカスタムメニューには独自のものが必要です。
• アコーディオンの開閉インジケーター。 アコーディオンセクションをクリックすると、右向き(折りたたみ)と下向き(展開)の間で切り替わる三角形。CSS の rotate 変形でアニメーションされます。
• パンくずリストのセパレーター。 パンくずリンクの間の右向き三角形。多くの場合、::before を使った CSS トライアングルとして構築されます。
• バナーとリボンの装飾。 バナーやセール札の端の三角形の切り欠き、「新着」バッジの角の折り目、ヒーローセクションの下端のシェブロン(スクロール促し用)。すべて単色の三角形、すべてボーダートリックによる。
• 装飾的セパレーター。 セクション区切りとしての小さな三角形の列、幾何学パターンのオーバーレイ、レトロな飾り。

アクセシビリティ上の考慮

CSS トライアングルは純粋に視覚的な装飾です。意味的な意味を持たず、アクセシビリティツリーには存在しません。スクリーンリーダーはそれらを読み上げません。純粋に装飾的な使用(吹き出しの尾、パンくずセパレーター)では、これが正しい挙動です。意味を伝える三角形(アクティブセクションを指す矢印、「クリックして詳細を見る」を示すメニューシェブロン)については、意味を他の手段で伝えなければなりません。メニュートリガー上の aria-expanded 属性、可視のテキストラベル、ボタン上の aria-label です。状態を伝えるために CSS トライアングルに頼ってはいけません。他の属性で意味的に伝えられた状態の視覚的補強として扱ってください。CSS の ::before および ::after 擬似要素のコンテンツは通常スクリーンリーダーで読み上げられず、これは装飾的な形には適切です。

このジェネレーターが生成する三角形の種類

• 上/下, 上または下を指す(等辺)
• 左/右, 左または右を指す
• 左上/右上, 角の三角形
• 左下/右下, 反対方向を指す角の三角形
• カスタムアスペクト, 非等辺形状用の調整可能な幅/高さ比

関連ツール