✂️ clip-path生成

CSS

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

円・楕円・三角形・ひし形・五角形・六角形・星形・矢印など、よく使われる図形のプリセットから選ぶだけで、clip-pathのCSSコードを生成できるツールです。プレビューを見ながら図形を選べます。画像や要素を特定の形にトリミングしたいときのデザイン作業に便利です。

使い方

自分で頂点座標を細かく調整することはできますか?

いいえ。現在のバージョンはプリセット図形からの選択のみに対応しています。より細かい調整が必要な場合は、生成されたpolygon()の座標値を手動で編集してください。

clip-pathはすべてのブラウザで使えますか?

主要なモダンブラウザ(Chrome・Firefox・Safari・Edge)では広くサポートされていますが、古いブラウザでは対応していない場合があります。

画像以外の要素にも使えますか?

はい。div要素やボタンなど、任意のHTML要素にclip-pathを適用できます。