ツールを実行
CSSのborderプロパティを活用した三角形コードを生成するオンラインツールです。幅と高さを0ピクセルに設定し、指定したサイズと向きに応じた枠線の幅（border-width）を自動計算して出力します。対応する向きは上、下、左、右および各対角線（左上、右上、左下、右下）の8種類です。サイズ入力欄に数値を指定すると、内部で二分割などの計算が行われ、上下左右の各辺に必要なピクセル値が割り振られます。入力が省略された場合は、上向きおよびサイズ20の標準値でコードが組み立てられます。出力されるCSSでは枠線の色が透明に設定されるため、取得後はプロジェクトのデザインに合わせて境界線のカラーを指定してご利用ください。
使い方
- 三角形の頂点を向ける方向（上、下、左、右、左上、右上、左下、右下など）を入力します。
- 三角形の大きさを数値（ピクセル基準）で指定します。未入力の場合は初期値20が適用されます。
- 必要に応じてカラーコードを入力します。
- 生成ボタンを押すと、枠線を用いた三角形用のCSSコードが結果欄に表示されます。
- 表示されたCSSコードをコピーし、ウェブサイトやアプリのスタイルシートに貼り付けて調整します。
使用例
- 上向きの三角形（向き: up、サイズ: 30）を指定すると、底辺30px相当の上向き三角形を構成するborder-widthを含むCSSコードが出力されます。
- 右下向きの三角形（向き: bottom-right、サイズ: 40）を指定すると、対角線の形状を表現する枠線幅のスタイルコードが出力されます。
よくある質問
入力したカラーが生成されたCSSコードの色に反映されないのはなぜですか？
現在の仕様では出力コードの枠線色が透明（transparent）として生成されます。三角形に色をつける際は、コピーしたCSSコード内の該当する枠線色をご希望のカラーコードに変更してください。
対応していない向きの文字列を入力した場合はどうなりますか？
定義外の文字列が指定された場合は、枠線幅の計算パターンとして上向きの形状が自動的に適用され、セレクタ名には入力した文字列がそのまま反映されます。
サイズに指定できる数値の単位は何ですか？
数値のみを入力します。計算結果は自動的にピクセル（px）単位としてCSSプロパティに組み込まれます。