CSS clip-path ジェネレーター

CSS clip-path ジェネレーターとは？

CSS clip-path ジェネレーターは、CSS の clip-path プロパティを視覚的に編集できる無料ツールで、要素を矩形以外の形に切り抜きたいフロントエンド開発者やデザイナー向けです。ドロップダウンからプリセットを選べます——半径と中心点を持つ circle() と ellipse()、必要なだけ頂点を追加できる polygon()、4 辺のオフセットを持つ inset()、そして角の半径を持つ角丸 inset() バリアント。各パラメーターは数値入力で指定するパーセントで、市松模様の背景のプレビューボックスが結果の形をリアルタイムで表示します。完全な clip-path の CSS が生成されるのでコピーできます。画像のマスク、斜めのセクション区切り、六角形のアバター、吹き出し形状などを、座標を手で数えずに作れます。

CSS clip-path ジェネレーターの使い方

1. プリセットのドロップダウンから形を選びます：円、楕円、多角形、inset、角丸。
2. 円または楕円は、半径（または X/Y 半径）と中心の X/Y 位置をパーセントで設定します。
3. 多角形は、各頂点の X と Y をパーセントで編集します。「頂点を追加」で頂点を増やし、値を編集して順序を調整します。
4. inset または角丸は、上・右・下・左のオフセットを設定します。角丸はさらに角の半径も指定します。
5. 入力に合わせてプレビューがボックスを切り抜く様子を確認します。
6. 生成された clip-path の CSS をコピーしてスタイルシートに貼り付けます。

使用例

プリセット 円, 半径 50%, 中心 50% 50%

clip-path: circle(50% at 50% 50%);

プリセット 多角形, 頂点 (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

プリセット 角丸, 全辺 inset 10%, 角の半径 20%

clip-path: inset(10% 10% 10% 10% round 20%);

よくある質問

clip-path は何に使いますか？

CSS の clip-path プロパティは要素を基本図形に切り抜き、図形の内側だけを表示します。円形アバター、斜めのセクション区切り、六角形グリッド、画像マスク、吹き出しなどに最適で、追加の画像や SVG ファイルも要りません。

多角形プリセットの仕組みは？

polygon() は X/Y 頂点のリストを順番につないで形を描きます。各頂点のパーセント値を編集し、「頂点を追加」でさらに頂点を挿入できます。最後の頂点は自動的に最初の頂点へつながります。形が有効であり続けるよう、最低 3 頂点が保たれます。

なぜ値はパーセントなのですか？

パーセントにすると切り抜きが要素に合わせて拡大縮小するため、同じ clip-path がどのサイズでも機能します。0% は要素ボックスの左端または上端、100% は右端または下端です。

角丸プリセットは何を追加しますか？

角丸プリセットは round の角半径を付けた inset() を使い、各辺が内側に切り抜かれて角が丸い矩形を作ります。通常の border-radius では inset の切り抜きと組み合わせられない、柔らかい枠付きの切り抜きに便利です。

データはどこかに送信されますか？

いいえ。ジェネレーターはすべて JavaScript でブラウザ内で動作します——形の値が端末から出ることはないため、プライバシーが保たれ、ページの読み込み後はオフラインでも使えます。