CSS clip-pathジェネレーター

図形を選び、プレビュー上で点をドラッグして調整します。パーセントで指定したclip-pathのコードは、どんなサイズの要素でも動作します。

clip-pathで図形に切り抜く

利用できる言語:

用意された図形（三角形、ひし形、六角形、五角形、星、矢印、吹き出し、角を切った形、平行四辺形、円、楕円）から選び、プレビュー上で点をドラッグして調整します。座標はパーセントなので、切り抜きはどんなサイズでも動作します。

ご自身の写真でテストして、できあがったclip-pathの行をコピーしてください。

要素のうち、図形の内側にある部分だけを表示するCSSのプロパティです。画像はファイル上では元のままで、図形の外側だけが隠れます。

はい。polygon()、circle()、ellipse()は、現在のすべてのブラウザでプレフィックスなしで動作します。

はい。同じ点の数の2つのpolygon()の間で、clip-pathにtransitionまたはanimationを使います。点が一方の形からもう一方へなめらかに動きます。

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。