CSS clip-path 生成
CSS clip-pathをビジュアルで編集して画像·要素を様々な形に切り抜きます。polygonはvertexをドラッグでき、円·楕円·insetもスライダーで即時調整できます。
使い方
polygon(多角形)·circle(円)·ellipse(楕円)·inset(余白矩形)の4モードをタブで切替。
polygonはSVGキャンバスの点をドラッグするか点数を変更。円·楕円·insetは入力欄やスライダーで値を調整。
リアルタイムプレビューで確認し「コピー」ボタンでCSSコードを一括コピー。プリセットボタンで三角形·星·吹き出しなどよく使う形を即時適用可能。
よくある質問
clip-pathとは？
CSSの`clip-path`プロパティは要素(画像·div)を任意の形に切り抜く機能。画像を円·多角形·吹き出し形に表示でき、切り取られた部分はクリック·hoverの影響も受けません。
ブラウザサポートは？
polygon·circle·ellipse·insetはすべてのモダンブラウザ(Chrome 55+, Safari 9.1+, Firefox 54+, Edge 79+)でサポート。SVG `<clipPath>`参照はそれ以前から可能でしたが、本ツールはインラインCSS形式のみ出力します。
polygonとpath()の違いは？
polygonは点を直線で結ぶ多角形。CSS Shapes 2仕様にはpath()関数もありベジエ曲線など任意の形が可能ですがブラウザサポートが限定的。本ツールはpolygonのみサポート。
clip-pathとmaskの違いは？
clip-pathはピクセル単位の見える/見えないの「切り抜き」、maskはアルファ(半透明)グラデーションも可能な「マスキング」。単純な形なら clip-pathが軽く速いです。
サーバーに送信されますか？
いいえ。すべての編集·プレビューはブラウザ内で行われ、入力値が外部に送信されることはありません。
