CSS Clip-path ジェネレーター

このツールについて

この CSS clip-path 作成ツールは、三角形、矢印、五角形、六角形、星、シェブロン、円、楕円、角丸の inset といったよく使う図形の clip-path 値を、ライブプレビュー付きで作成します。

使い方

1. 一覧から図形を選びます。
2. プレビュー用の塗りつぶしの色を選びます。
3. 「CSS をコピー」をクリックし、任意の要素や画像に clip-path を適用します。

知っておきたいこと

• clip-path は図形の外側をすべて隠すため、画像マスクや SVG ファイルは不要です。
• polygon() はパーセントで指定した x y 座標のリストを受け取り、要素に合わせて拡大縮小されます。
• circle(50% at 50% 50%) は要素を中央の円形に切り抜きます。
• inset() に round を付けると、長方形の切り抜きに角丸が加わります。
• clip-path の基本図形は、現在の主要ブラウザすべてで対応しています。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問