✂️ clip-path生成
clip-path: circle(50% at 50% 50%);
円・楕円・三角形・ひし形・五角形・六角形・星形・矢印など、よく使われる図形のプリセットから選ぶだけで、clip-pathのCSSコードを生成できるツールです。プレビューを見ながら図形を選べます。画像や要素を特定の形にトリミングしたいときのデザイン作業に便利です。
使い方
- 使いたい図形のプリセットをクリックして選びます。
- 上部のプレビューで実際のクリッピング結果を確認できます。
- 生成されたCSSコードを「コピー」でコピーして、自分のスタイルシートに貼り付けます。
計算の仕組み
CSSのclip-pathは、要素を指定した形で切り抜いて、その内側だけを表示するプロパティです。このツールは、円・三角形・六角形・星などの定番の形を選ぶと、プレビューと一緒にclip-pathの値を表示します。 ・circle(半径 at 中心のx 中心のy): 円 ・ellipse(横の半径 縦の半径 at 中心): 楕円 ・polygon(x1 y1, x2 y2, …): 頂点を順番に結んだ多角形 座標は、要素の左上を0% 0%、右下を100% 100%とした割合で指定します。たとえば三角形の polygon(50% 0%, 0% 100%, 100% 100%) は、上の中央・左下・右下の3点を結んだ形です。
計算例
三角形 clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 六角形 clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); 円 clip-path: circle(50% at 50% 50%); 画像に円のclip-pathを付けると、正方形の写真を丸いアイコンのように表示できます。
使用上の注意
- 切り抜かれた外側の部分は、クリックなどのマウス操作にも反応しなくなります。
- box-shadowやborderも一緒に切り抜かれます。影を付けたい場合は、親要素にfilter: drop-shadow()を使います。
- transitionを使えば、頂点の数が同じpolygon同士で形をなめらかに変化させるアニメーションもできます。
よくある質問
自分で頂点座標を細かく調整することはできますか?
いいえ。現在のバージョンはプリセット図形からの選択のみに対応しています。より細かい調整が必要な場合は、生成されたpolygon()の座標値を手動で編集してください。
clip-pathはすべてのブラウザで使えますか?
主要なモダンブラウザ(Chrome・Firefox・Safari・Edge)では広くサポートされていますが、古いブラウザでは対応していない場合があります。
画像以外の要素にも使えますか?
はい。div要素やボタンなど、任意のHTML要素にclip-pathを適用できます。