なぜボーダートリックで三角形ができるのですか?

ブロック要素の幅と高さがゼロのとき、ボーダーは内側にしか広がる場所がありません。CSSレンダリングアルゴリズムは各ボーダーを台形として描画し、それらは45度の対角線で隣接するボーダーと出会います。サイズゼロのボックスでは、これらの台形が中央で出会う純粋な三角形に折りたたまれます。3つを透明にし1つを単色にすることで、単一の三角形を分離できます。これは限界ケースでボーダーがレンダリングされる方法の副作用であり、設計された機能ではありませんが、1990年代以降のすべてのブラウザで信頼性高く動作します。

2026年でもボーダートリックは推奨されますか?

ドロップダウンキャレット、ツールチップ矢印、小さな方向インジケーターのような三角形のUI要素には、はい。軽量で(余分なDOMもSVGパースもなし)、どこでもサポートされており、currentColorを介して色を継承します。三角形より複雑なもの(カスタム形状、曲線、マルチセグメントパス)には、clip-pathやSVGを使用してください。ボーダートリックは非推奨ではなく、適用範囲が狭いだけです。

角を丸めた三角形を作れますか?

ボーダートリックでは作れません — 鋭角のみを生成します。丸い三角形には、丸みを帯びた線結合を持つパスのSVG、またはポリゴンと別途border-radius処理を組み合わせたclip-pathを使用してください。一部の高度なCSSテクニックでは、ボーダーを重ねたり擬似要素を使って丸みを偽装しますが、もろくサイズが変わると壊れます。SVGが実用的な選択です。

三角形を非標準の角度に回転するにはどうすればよいですか?

三角形要素にCSSのtransform: rotate()を使用してください。ボーダートリックは8つの基本方向を提供します。それ以外(例えば30度の矢印)には、結果を回転させます。例: 'right'三角形を30度回転すると、30度で右上を指す矢印になります。transformアプローチは、三角形を非二等辺形状に歪めるためにボーダー幅を再計算するより簡単です。

ボーダー三角形、clip-path、SVG間にパフォーマンスの違いはありますか?

わずかにありますが、ほとんど意味のある差ではありません。ボーダー三角形は最も安価です。空のdivのボーダーだけで、ボーダー自体を超えた描画はないからです。Clip-pathはブラウザにマスクを計算させるため、初期描画では少し高価ですが、その後は無視できます。SVGはレンダーツリーに別ノードを追加します。1つのツールチップ矢印では差は測定不能です。リスト内の数千の三角形(評価の星など)には、SVGスプライトを使用してください — インラインSVGの要素ごとのオーバーヘッドが大規模では支配的になります。

2026年の純粋CSSトライアングル — ボーダートリックがまだ勝つとき(そして勝たないとき)

私はフロントエンド開発者のキャリアを、三角形を描く必要があるときに何を使うかで判断できる、というジョークを言い続けています。直接<svg>要素を使う人は、おそらく2018年以降にCSSを学んだのでしょう。clip-path: polygon(...)を使う人は、2015-2018年頃から始めた人です。本能的に奇妙なボーダー宣言を持つ<div>を使う人は、これを長い間やってきた人です。

「奇妙なボーダー宣言」バージョン — CSS三角形ボーダートリック — は3つの中で最も古く、小さなUI要素には今でもデフォルトの選択肢です。このガイドでは、なぜそれが機能するのか、いつ正しい答えなのか、いつそうでないのか、そして数学を省くためにToolBox HubsのCSS三角形ジェネレーターをどう使うかを説明します。

トリック、簡単に

幅と高さがゼロのdivを取り、ボーダーを与えます。ボーダーは広がる場所がないため中央に折りたたまれ、各ボーダーは他のボーダーと45度の対角線で出会う三角形になります。

.demo {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}

中央で出会う4つの色付き三角形に分割された正方形が得られます。次に、これらのボーダーのうち3つを透明にします:

.triangle-down {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-bottom: 0;
  border-left: 50px solid transparent;
}

下を指す単一の赤い三角形だけが残ります。それがトリックです。これは、仕様がボーダーが角でどう出会うかを定義して以来CSSに存在しており、IE6を含むすべてのブラウザで動作してきました。

なぜこれがツールチップ矢印でSVGに勝るのか

2026年、Web UIで三角形を描く合理的な方法は3つあります:

ボーダートリック — width: 0; border: ...
clip-path — 色付き要素のclip-path: polygon(...)
SVG — <svg><polygon points="..." /></svg>

小さな方向UI要素(ドロップダウンキャレット、ツールチップ矢印、パンくずセパレーター、アコーディオンシェブロン)には、ボーダートリックが通常最良です:

追加のDOMノードなし。 スタイル付きdivまたは擬似要素だけです。SVGはレンダーツリーに別ノードを追加し、内部の<polygon>要素も加わります。矢印付きツールチップでは、1つの追加ノード対2-3です。

わずかな調整でcurrentColorをデフォルトで継承。 ボーダー色をcurrentColorに設定すると、三角形は親のテキスト色を採用します。CSSルールを書き換えずにダーク/ライトモード切り替えに便利です。

SVG名前空間の心配なし。 xmlnsは不要、viewBoxを考える必要なし、SVGがインラインかスプライト参照かを心配する必要なし。

あらゆるズームレベルでくっきりレンダリング。 ボーダートリックはブラウザのCSSエンジンによるサブピクセルレンダリングを使用します。これは最も積極的に最適化されたレンダリングパスです。SVGは1pxスケール、特に古いブラウザでアンチエイリアスのアーティファクトを示すことがあります。

ボタンであるかホバー効果を持つ三角形には、スタイリングとトランジションのサポートは他のすべての要素と同じです — :hover { border-bottom-color: blue }がそのまま動作します。

代わりにclip-pathまたはSVGを使うべき場合

限界について正直に言うと:

基本的な三角形でないもの。 星、五角形、複雑な形状の矢印、曲線を持つもの。ボーダートリックは数学的必要性により三角形のみです。clip-pathとpolygon()またはSVGを使用してください。

テキストとともにスケールする必要がある三角形。 ボーダートリックはピクセル値を使用します。親要素のフォントサイズに合わせてスケールする三角形が欲しい場合、emまたはrem単位をボーダー幅として使用できますが、扱いにくいです。viewBoxを持つSVGはスケーリングをより自然に処理します。

角が丸い三角形。 ボーダートリックでは角を丸める方法はありません。stroke-linejoin="round"のSVGパス、または別途border-radiusを使うclip-pathが前進する道です。

塗りと異なるストローク(輪郭)が必要な三角形。 ボーダーは独自のボーダーを持てません。SVGはfillとstrokeを別々のプロパティとして持ちます — 輪郭付き矢印に最適です。

形状を変える(形状間でアニメーションする)三角形。 SVGはパス間でスムーズにモーフィングできます。clip-pathはポリゴン点間で補間できます。ボーダーベースの三角形は形状を変えられず、サイズと色のみです。

UIの三角形の80%では、これらの条件は当てはまりません。シンプルなケースはシンプルなままです。

計算 (または: なぜジェネレーターが欲しいのか)

ボーダートリックの問題: 望む方向に正しいボーダー宣言を見つけ出すのが面倒です。

上向き三角形の場合:

top border: 0
left border: 半幅透明
right border: 半幅透明
bottom border: 全高単色

左向き三角形の場合:

top border: 半高透明
right border: 全幅単色
bottom border: 半高透明
left border: 0

角の三角形(角の直角三角形)の場合:

隣接する2つのボーダー単色(1つがサイズを設定)
反対側の2つのボーダーは0
...待って、それは間違っています、調べさせてください...

問題が見えますね。各方向には、どのボーダーが色付きで、どれが透明で、どれがゼロかの独自の配置があります。計算は可能ですが、正しくなるまで同じ三角形CSSを3回書き直すほど面倒です。

これがCSS三角形ジェネレーターのスイートスポットです。方向を選び、幅と高さを設定し、色を選び、CSSをコピーする。ジェネレーターがボーダーの算術を行うので、あなたは行う必要がありません。

ほとんどのユースケースをカバーする8方向

4つの基本方向(上、下、左、右)は要素の中心にある二等辺三角形を生成します。これらは中央揃えのインジケーターに必要なものです: ボタン下のドロップダウン矢印、ツールチップポインター、展開/折りたたみシェブロン。

4つの角方向(左上、右上、左下、右下)は角に固定された直角三角形を生成します。これらは角リボン、紙折り効果、バッジアクセント、シェブロンスタイルのパンくずセパレーターに必要なものです。

/* 右向き矢印 (ドロップダウンキャレット) */
.caret-right {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
}

/* 角リボン (右上) — 右上角の単色三角形 */
.ribbon {
  width: 0;
  height: 0;
  border-top: 60px solid #6366f1;
  border-left: 60px solid transparent;
}

ジェネレーターは、どのボーダー設定がどの方向を生成するかを覚える必要がないように、統一されたUIで8つすべてをカバーします。

実用的なパターン

ボーダートリックの動作を示す現実世界のスニペットをいくつか紹介します。

ツールチップ矢印

トリガー要素を指す矢印付きのツールチップ。矢印はツールチップの擬似要素です:

.tooltip {
  position: relative;
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid #1f2937;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

border-topの色がツールチップの背景と一致するため、矢印が同じ形状の一部のように見えます。これが正統的なユースケースです。

パンくずシェブロン

パンくず項目間の古典的な「>」セパレーター、ただしCSSで描かれた矢印として:

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}

.breadcrumb-item::after {
  content: '';
  display: inline-block;
  margin-left: 12px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #9ca3af;
}

.breadcrumb-item:last-child::after {
  display: none;
}

›Unicode文字を使うこともできますが、CSSアプローチでは精密なサイズ制御が可能で、デザインシステムの色と正確に一致します。

吹き出しのしっぽ

チャットメッセージ吹き出しのしっぽ:

.bubble {
  position: relative;
  background: #6366f1;
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 280px;
}

.bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #6366f1;
  border-left: 8px solid transparent;
}

吹き出しの左下に固定された「右下」角三角形の形状が、SVGなしでクラシックな吹き出しのしっぽの見た目を与えます。

一般的なミス

私の三角形を壊してきたもの:

width: 0; height: 0;を忘れる。 これらがないと、ボーダーは点に折りたたまれず、実際のボックスの周りに描画されます。三角形ではなくフレームになります。

border-colorだけを設定してborder-widthを忘れる。 幅ゼロのボーダーは色に関係なく描画されません。一部がゼロでも、4つすべてのボーダーに明示的な幅が必要です。

border-topを三角形の上部と混同する。 三角形は色付きボーダーから離れる方向を指します。単色のborder-bottomは上を指す三角形を生成します。三角形を下に向けたい場合は、単色のborder-topを使用してください。これは最初は誰でも引っかかります。

ボーダー幅ではなくwidthで三角形のサイズを決める。 width: 100px; height: 50pxを設定しても何も役立ちません — 要素はボーダートリックのためにゼロサイズである必要があります。三角形の「サイズ」はボーダー幅によって完全に制御されます。

色のホバートランジションでborder-colorではない。 transition: background-color 200msはボーダー三角形をアニメーションしません。色変更をアニメーションするにはtransition: border-color 200ms(またはtransition: all)を使用してください。

currentColorに関するメモ

currentColorは要素のcolorプロパティ値に解決されるCSSキーワードです。親のテキスト色と一致する必要がある三角形に非常に便利です:

.icon-only-button {
  color: #6366f1;
}

.icon-only-button::after {
  /* この三角形はボタンの色を継承します */
  border-left: 8px solid currentColor;
}

.icon-only-button:hover {
  color: #4f46e5;
  /* 三角形は自動的に新しい色に更新されます */
}

このパターンは、ボーダー三角形をテーマシステムやダークモードと相性良くするものです。親に色を一度設定すれば、すべての三角形がそれを継承します。各三角形の方向に対して別々のダークモードCSSルールは不要です。

相性の良いツール

三角形は通常、より大きなUIパズルの1ピースです。これらのツールは同じワークフローでよく登場します:

CSSクリップパスジェネレーター — 三角形より複雑な形状(星、五角形、矢印)用
CSSグラデーションジェネレーター — 三角形の背後の背景を埋めるため
CSSボーダー半径ジェネレーター — 鋭い三角形を補完する丸い形状用
カラーピッカー — ブランドパレットから正確な三角形の色を調整するため

CSS三角形ジェネレーターは無料で、完全にブラウザ内で実行され、任意のスタイルシートに貼り付けられるクリーンなCSSを出力します — フレームワーク依存なし、前処理なし、ビルドステップ不要です。方向を選び、サイズスライダーをドラッグし、コードをコピー。

なぜ私はまだ2026年にこれを使うのか

フロントエンドのトレンドは速く変化します。フレームワークは来ては去ります。CSS自体もコンテナクエリ、:has()、レイヤードスタイル、ビュートランジションを追加しました — モダンインターフェースの書き方を変える主要機能です。

しかしボーダートリックは「UI要素の一部として小さな三角形が必要」に対する正しい答えのままです。小さく、速く、よく理解されており、どこでも動作します。古いことは問題ではなく、最初に問題を完全に解決した証です。一部の技術は置き換える必要がありません。

柔軟性が必要なときはSVGを使ってください。三角形以外の形状が必要なときはclip-pathを使ってください。しかしツールチップ、ドロップダウン、パンくずに登場する三角形 — 最も一般的なUI三角形 — には、ボーダートリックが今でも最もクリーンなオプションです。