カテゴリー: 開発ツール
CSS三角形ジェネレーター
border のテクニックで純粋なCSS三角形を作る
向き・サイズ・色を選ぶと、サイズが0のボックスに色付きのborderを設定して三角形として表示させる仕組みを、プレビュー付きで生成します。コピーできるCSS宣言もその場で作成され、すべてブラウザ内で計算されます。
出力
width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 80px solid #0f7b63; border-left: 80px solid transparent;
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
CSS三角形とは、`width: 0; height: 0;` のボックスの一辺のborderだけに色を付け、隣り合う2辺を透明にすることで、色の付いた辺のくさび形だけを見せる手法です。手作業では辺の組み合わせを間違えたり、透明にすべき辺を塗りつぶしたままにしてしまいがちです。このツールは向き・サイズ・色から4つの宣言を組み立て、変更のたびに実際のボックスで結果を確認できます。
使い方
- 向き（上・下・左・右）を選びます。
- サイズと色を設定します。
- border の宣言をスタイルシートにコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- サーバーに何か送信されますか。
- いいえ。プレビューはブラウザが描画する実際のCSS borderであり、宣言はページ内で組み立てられたテキストです。
- なぜ width と height を0にする必要があるのですか。
- このborderのテクニックは、borderが1点に集まることでくさび形になる仕組みに依存しています。widthやheightが0でないと、くさびが台形状に崩れてしまいます。
- ツールチップや吹き出しの矢印に使えますか。
- はい、それが最も一般的な使い方です。三角形を吹き出しの端に絶対配置し、色を吹き出しの背景色に合わせてください。