タスクの道筋 / 入力から結果へ
CSS の三角形を作る方法
- 01
方向を選ぶ
「方向」で「上向き」「右向き」「下向き」「左向き」から選びます。プレビューは即座に更新されます。この手法では 1 本のボーダーに色を付け、隣接するボーダーを透明に保ちます。ワークスペースは上向きの三角形から始まります。
- 02
サイズを設定する
「底辺の幅」と「三角形の高さ」を 8～180 px の範囲で 1 px ずつ設定します。上向き・下向きでは幅が底辺、高さが頂点までの距離です。左向き・右向きでは高さが縦の底辺、幅が横方向の伸びになります。初期の寸法は横 72 px、縦 64 px です。
- 03
塗りつぶしカラーを選ぶ
「塗りつぶしカラー」に任意の 6 桁の 16 進数値を設定します。デフォルトは #0f4cff です。ライブプレビューと生成される border-color 宣言は常に同期するので、見えているものがそのままコピーされます。
- 04
プレビューのステータスを確認する
ライブプレビューは変更のたびに再レンダリングされ、すべての値が範囲内ならステータスバッジは「有効な CSS」と表示されます。範囲外の値があると「値を確認」に変わり、ハイライトされたコントロールを修正するまでコピーとダウンロードがブロックされます。
- 05
サンプルプリセットを試す
「サンプルを読み込む」で右向きの三角形を設定できます。横方向の伸びは 104 px、縦の底辺は 86 px、塗りつぶしは #ffd11a です。「リセット」で初期値に戻せます。
- 06
CSS をコピーまたはダウンロードする
「CSS をコピー」で .triangle ルールをクリップボードにコピーするか、「.css をダウンロード」で toolars-triangle.css として保存します。このルールは幅と高さをゼロに設定し、4 本のボーダーを宣言するので、どのスタイルシートにもそのまま貼れます。