FOLLOW US

KAKERU TOOLS ─ 無料・登録なし

clip-path メーカー写真の上をクリックして、好きな形に切り抜く。CSSのコードが、その場で出ます。

無料で使える登録・ダウンロード不要スマホでもOK
ひな形

点をドラッグで動かす/線の近くをクリックで点を足す/点をダブルクリック(または選んで「選んだ点を消す」)で消す。
写真は送信されません(このパソコン・スマホの中だけで使います)。

仕上がり背景の白黒は「透明」の意味です
切り抜いた仕上がり
コピペ用のコード

				
数字は%なので、画面の幅が変わっても形は崩れません。しくみは「丸い画像・好きな形の画像をCSSで作る」で解説しています。
1
写真を選ぶ

見本の写真のままでも、自分の写真でも。写真はどこにも送られません。

2
点を打って形を作る

クリックで点を足し、ドラッグで動かす。ひな形から始めて直すのも早いです。

3
コードをコピーして貼る

CSSを自分のサイトに貼るだけ。HTMLの書き方もセットで出ます。

Shapesよく使う形から始める
広告
ABOUT ─ この道具について

KAKERUデザインが作りました。WEBとデザインの仕事を20年以上続けてきた中で「あったら便利」と思ったものを、無料の道具にしています。サイト制作やWEBまわりのご相談もどうぞ。

ご相談はこちら →