CSS clip-path ポリゴンジェネレーター & ビジュアルエディター
図形プリセットから始めて、ポイントをドラッグするか X / Y の数値を入力し、生成された clip-path をコピーします。プレビューにはコピーする宣言がそのまま適用されます。
ブラウザ内でローカルに実行 · clip-path · polygon() · ドラッグ可能な頂点
VoriTools
図形プリセットから始めて、ポイントをドラッグするか X / Y の数値を入力し、生成された clip-path をコピーします。プレビューにはコピーする宣言がそのまま適用されます。
ブラウザ内でローカルに実行このエディターは 1 つの polygon() を編集し、スタイルシートに必要な 2 行を出力します。-webkit- 接頭辞付きの -webkit-clip-path と、標準の clip-path です。図形プリセットは 5 種類（三角形 3 ポイント、ひし形 4 ポイント、六角形 6 ポイント＝初期値、星 10 ポイント、シェブロン 6 ポイント）で、ポイントはキャンバス上でハンドルをドラッグするか、X / Y のパーセント値を入力して移動できます。
ステージは同じ CSS のライブプレビューです。ドラッグに合わせて多角形がプレビュー要素に適用され、ヘッダーの表示はポイント数を示します。座標は要素自身のボックスのパーセントなので、別のサイズの要素に適用しても形の比率は保たれます。
出力は 1 つのルールだけです。.clipped-element に対して -webkit-clip-path と clip-path の 2 行が並び、どちらも同じ polygon() 値（x y のパーセントをカンマで区切ったもの）を持ちます。-webkit- 以外の接頭辞や CSS 変数は出力しないので、.clipped-element は実際に使うクラス名に置き換えてください。
座標は参照ボックスのパーセントです（clip-path を指定していない要素ではボーダーボックス）。そのため図形は要素の大きさに合わせて拡大縮小し、プレビュー用キャンバスのピクセルサイズには依存しません。
プレビューは今使っているブラウザーの描画結果です。このページは互換表も対応判定も持ちません。基本的な polygon() のクリッピングは現在の Chrome / Edge / Firefox / Safari で動作し、-webkit- の行は古い iOS / Safari を支えますが、意味を持つ図形にする前に閲覧者が使うブラウザーで確認してください。対応していない場合は要素全体がそのまま表示されます。
クリッピングは見た目だけの話ではありません。多角形の外側をクリックしてもその要素には当たりません。切り抜いた要素がリンクやボタンで、押せる範囲を画面どおりにしたいときに効いてきます。
ポリゴンには 3 ポイントが必要で、最大 12 ポイントまで扱えます。ポイントを追加は選択中のポイントの次の辺を分割し、ポイントを削除は選択中のポイントを消し、ステータス行がページの言語で上限を伝えます。アクティブポイントの一覧は作成順で、polygon() 内の座標の順序と同じです。
処理はすべてページ内で完結します。図形はブラウザーが計算し、入力が送信されることはなく、オフラインでも動作します。プレビュー要素にはコードパネルと同じ宣言が適用されるので、コピーした CSS と表示が食い違うことはありません。