CSS 三角形ジェネレーター
辺または角の方向を選び、底辺と高さを調整して、ゼロサイズのボーダー技法を UI マーカーや装飾形状に利用します。
ライブプレビュー
上向き三角形
表示される図形は幅と高さが 0 の要素の境界線で作られます。透明な境界線によって他の辺が見えなくなります。
使い方
使い方
- 上、下、左、右、または角の方向を選びます。
- ライブプレビューを見ながら底辺幅、高さ、色を設定します。
- HTML と CSS をコピーし、必要なら自分のスタイルシートでレスポンシブなボーダー値を設定します。
ゼロサイズ要素が三角形になる仕組み
生成要素の width と height は 0 です。中央で交わるボーダーのうち、色付きボーダーが三角形のくさびとして見えます。他のボーダーは透明色ですが、領域を占めて辺を決めます。
方向、底辺、高さ
上向きと下向きは左右の同じ透明ボーダーで底辺を作ります。左向きと右向きは上下の同じ透明ボーダーを使います。角のプリセットは色付きボーダーと透明ボーダーを 1 つずつ使い、直角三角形を作ります。プレビューを見やすくするため、値は実用的な 8〜240px に制限されています。
レスポンシブ時の注意
コピーしたルールのボーダー幅は固定ピクセルで、親要素に合わせて自動拡大縮小しません。レスポンシブ配置では CSS カスタムプロパティに値を置くか、メディアクエリや clamp() で周囲のレイアウトを調整してください。装飾用三角形を操作対象にする前に、近くのテキスト、フォーカスリング、タップ領域、ズーム、狭い画面で確認します。
よくある質問
あわせて知りたいこと
ボーダーを省略せず透明にするのはなぜですか？
透明でもボーダーの寸法は保たれます。同じ幅の辺が 2 つの斜辺を作り、色付きボーダーが三角形として見えます。
吹き出しのポインターに使えますか？
はい。生成した装飾要素を吹き出しの横に配置し、読める内容やコントロールのフォーカス表示を覆わないようにします。
SVG やポリゴンを作りますか？
いいえ。通常の HTML と CSS ボーダーを生成します。複雑な形状、線、拡大縮小可能なパス編集には SVG または clip-path を使ってください。