クリップパスジェネレーター
複雑なCSSクリップパスを視覚的にデザインします。
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- ハンドルをクリック＆ドラッグで変形
- クイック形状のプリセットを使用
- 'polygon'モードでカスタム形状を作成
おすすめのツール
役に立つかもしれない厳選されたツール
CSS clip-pathでカスタム図形を切り抜く
概要
CSSのclip-pathプロパティは、画像を編集せずに要素をカスタム図形（三角形・六角形・矢印・ブロブ・任意の多角形）に切り抜けます。追加ファイルなしで非長方形のデザインを加える強力な方法です。座標を手で書くのは面倒なので、このclip-pathジェネレーターは点を視覚的にドラッグし、正確なCSSをブラウザ内でコピーできます。
使い方（ステップ）
- 1
図形を選ぶか描く
プリセット（三角形・六角形・円）から始めるか、点を置いてカスタム多角形を定義します。
- 2
点をドラッグ
ライブプレビューで角を動かし、図形が思い通りになるまで調整します。
- 3
clip-path CSSをコピー
生成されたclip-path値を要素に貼り付け、その図形に切り抜きます。
仕組み
図形を選ぶか描くと、ツールがclip-pathでそれを定義します。通常はパーセント座標のpolygon()や、circle()・ellipse()などのプリセットです。図形の外はすべて透明になり、要素は輪郭の内側だけ見えます。ライブプレビューで点をドラッグすると、ツールが対応するclip-path値を作り、どの要素にも貼り付けられます。
こんなときに使う
画像やセクションを角ばった・幾何学的な図形に切り抜くとき。ページセクション間に斜めの仕切りを作るとき。六角形のアバターやバッジを作るとき。吹き出しに矢印や吹き出し形状を加えるとき。非長方形のヒーローやカードをデザインするとき。多角形の座標が見える図形にどう対応するか学ぶとき。
よくある質問
切り取られます。完全に透明で操作不可になり、クリックは通り抜けます。要素は図形の輪郭内でのみ表示・反応し、下地のレイアウトボックスは元の空間を占めたままです。
注意事項
clip-pathは視覚的に切り抜きますが、要素のボックスはレイアウト上まだ長方形の全空間を占めるため、重なりや余白の意外な結果が生じることがあります。また、切り取られた内容は隠れるだけで削除されないため、機微な情報を隠すのに頼らないでください。