borderでCSS三角形を作る仕組み
幅と高さが0の要素へ4方向のborderを設定すると、各辺が三角形として接します。表示したい向きの辺だけ色を付け、ほかを透明にするのが基本です。本ツールはCSS Backgrounds and Bordersのborder構文を使い、clip-pathや画像、SVGを使わず生成します。
矢印は軸と疑似要素を組み合わせる
矢印の軸は通常の要素の背景色で作り、矢じりは::after疑似要素のborder三角形で作ります。疑似要素についてはCSS Pseudo-Elementsで定義される構文を利用しています。
サイズと奇数値について
底辺や矢じりの幅を左右または上下へ半分ずつ割り当てます。奇数を指定した場合は40.5pxのような0.5px単位を保持するため、指定寸法を丸めません。各サイズは1〜500pxの整数に制限しています。
アクセシビリティ上の注意
装飾目的の図形にはサンプルのようにaria-hidden="true"を付けられます。意味のある矢印として使う場合は、周囲のテキストやボタンのアクセシブルネームで意味を伝えてください。
よくある質問
CSSだけで三角形を作れますか？
作れます。幅と高さが0の要素へ太いborderを付け、不要な辺を透明にします。
矢印はどのように作っていますか？
本体要素を軸にし、::after疑似要素でborder三角形の矢じりを作っています。
奇数の幅も指定できますか？
指定できます。半分にするborder幅は0.5px単位で正確に生成します。
最大サイズはいくつですか？
各サイズは1pxから500pxまでです。大きな図形はプレビュー枠内でスクロールできます。
生成したコードは自由に使えますか？
CSSとHTMLをコピーし、制作中のWebページへ貼り付けて利用できます。
入力内容は送信されますか？
送信・保存されません。生成とプレビューはブラウザ内で行い、Cookie・localStorage・sessionStorage・IndexedDB・URLへ設定を保存しません。