CSSのボーダー方式で三角形を生成する方法
CSSのボーダーを使った三角形のCSSテキストを生成できます。方向やサイズを指定でき、未指定時は上向き・サイズ20が使われます。
CSSだけで三角形のCSSを作る
CSSのボーダーを使った三角形のスタイルを、方向・サイズ・色の入力から確認したいときに使えるツールです。上向きだけでなく、下・左・右と四隅の方向にも対応しています。出力は三角形を描画するCSSテキストなので、生成後に内容を確認してからスタイルへ取り込めます。方向、サイズ、色を省略した場合にも既定値が使われます。
生成手順と入力の確認
- 方向を選択または入力します。選べる方向は、上、下、左、右、左上、右上、左下、右下です。方向を指定しない場合は上向きになります。
- サイズを入力します。省略すると20が使われます。入力したサイズは計算に使われ、ボーダー幅のピクセル値としてCSSに反映されます。
- 色を入力します。省略時の値は
#3498dbです。ただし、生成されるCSSでは入力した色は使われず、ボーダー色は透明になります。色付きの三角形を期待する場合は、出力内容を確認してください。 - 生成を実行し、表示されたCSSテキストを確認します。CSSには幅と高さが0、実線のボーダー、サイズから計算された4方向のボーダー幅が含まれます。必要な方向とサイズになっているかを確認してから利用します。
- 指定した方向に対応するセレクターと、ボーダー幅の組み合わせを見比べます。認識されない方向を入力した場合は、ボーダー幅のパターンは上向きにフォールバックしますが、セレクターには入力した方向の文字が残ります。
生成されたCSSの読み方
結果は、ボーダーの幅を組み合わせて三角形を表すCSSテキストです。幅と高さが0で、4方向のボーダー幅にピクセル単位の値が入るため、方向ごとに幅の組み合わせを確認できます。サイズの計算には2で割る処理も含まれるため、入力値をそのまま4方向へ入れる形式とは限りません。
色の入力値と生成結果のボーダー色は一致しません。生成されるボーダー色は透明なので、色を指定しても三角形の色を変更する機能としては扱えません。また、未知の方向は入力ミスとして停止するのではなく、上向きのボーダー幅パターンを使います。セレクターの方向文字だけが入力内容を反映するため、見た目とセレクターの意味が合わない場合があります。
使用例
Webページの吹き出しに使う上向き三角形を作る場面では、方向を上向き、サイズを20、色を#3498dbとして生成を実行します。幅と高さが0の要素に対して、実線のボーダーと4方向のボーダー幅がピクセル値で計算され、透明なボーダー色とともにCSSテキストとして出力されます。
制限事項
- 色の指定による着色機能はなく、サイズには計算処理が行われます。未知の方向では上向きの幅パターンが使われるため、入力値だけで意図した見た目になるとは限りません。
よくある間違い
- 色を指定すれば色付きになり、未対応の方向ならエラーになると考えるのが誤りです。ボーダー色は透明のままで、未知の方向は上向きの幅パターンへフォールバックするため、生成後に色とセレクター、4方向のボーダー幅を確認してください。
よくある質問
方向やサイズを省略できますか？
方向を指定しない場合は上向きになります。サイズを省略した場合は20が使われます。
入力した色で三角形を着色できますか？
色を入力しても生成CSSのボーダー色は透明です。入力した色はCSSに反映されません。
未対応の方向を入力するとどうなりますか？
認識されない方向では処理が止まらず、ボーダー幅は上向きのパターンになります。一方、セレクターには入力した方向の文字が残ります。