CSS clip-path ビルダー (円、楕円、多角形、Inset)

使い方

1. 形状を選択: 円 (半径 + 中心)、楕円 (2 つの半径 + 中心)、多角形 (3-16 頂点)、inset (各辺から切り取る長方形 + 任意の角の丸み)。
2. スライダーや数値入力で調整。多角形ではプレビューの任意位置をクリックして頂点を追加。
3. プリセット (三角形、六角形、星、矢印…) をタップして既知の形から始め編集。
4. プレビュー背景 (画像、単色、グラデーション) を切り替えて実コンテンツで形がどう見えるかを確認。
5. CSS をコピー — 最新の `clip-path` と古い Safari 用 `-webkit-clip-path` の両方を含む。

よくある質問

なぜ clip-path は % を使う?

% は形状をレスポンシブにします: `polygon(50% 0%, 100% 100%, 0% 100%)` の三角形は要素が 100px でも 1000px でも三角形のまま。px、em、rem などの絶対単位も使えますが、再利用可能なコンポーネントではほぼ % が正解。本ツールは % のみ出力 — 貼り付けた後、固定サイズが本当に必要なら CSS で単位を変えてください。

要素は元の領域を占有し続けますか?

はい。`clip-path` は純粋にペイント時の効果 — 要素のレイアウトボックスは変わらず、周囲のコンテンツは元の長方形の周りに流れ、クリップ後の形ではありません。レイアウトが見える形に従う必要があれば `shape-outside` (別プロパティ)、`mask-image`、または path 付き SVG を使用。

clip-path をアニメーションできる?

はい、ただし同じ形状ファミリーで同じ頂点数のパス間のみ — 同頂点数の多角形同士、または円同士は OK ですが、多角形↔円は不可。多角形モーフィングには両状態が同じ点数をほぼ同じ順序で持つ必要。ブラウザは頂点座標を線形補間します。

inset の 'round' 値は何?

inset 長方形の 4 つの角に適用される任意の半径 — `border-radius` と同じ構文。`inset(10% round 5%)` は角丸の長方形クリップ。シャープな角は 0 (`round` なし) で。CSS 仕様は角ごとに異なる半径 (`round 10% 20% 5% 15%`) も許容しますが、本ツールは均一値 1 つで簡素化。

なぜ clip-path と -webkit-clip-path を両方?

Safari は 14.1 (2021) より古いバージョンに `-webkit-clip-path` プリフィックスを要求。現代のほぼすべてのブラウザはプリフィックスなし `clip-path` をサポート。両方出力してもコストはなく、少し古いデバイスのユーザーを保護。エバーグリーンブラウザのみが対象なら `-webkit-` 行は削除可能。

関連ツール