CSS clip-path ジェネレーター
多角形・円・星などのプリセットでclip-pathを作成し、プレビュー・CSSコピー
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
三角形・ひし形・六角形・星・矢印・円・楕円など、よく使う図形のプリセットをクリックするだけで、CSSのclip-path値をすぐに作成します。カラーボックスや自分でアップロードした画像に切り抜き効果をリアルタイムでプレビューし、値を直接編集したり、そのままコピーしたりできます。
使い方
- 好みの図形プリセットのボタンを押して、clip-pathの形を選びます。
- 必要ならclip-pathの値を直接編集して、座標を細かく調整します。
- プレビュー画像を入れると、実際の写真に適用された見た目を確認できます。
- 完成したclip-pathのCSSをコピーして、好きな要素に貼り付けます。
よくある質問
- clip-pathはどう動作しますか?
- 要素を指定した図形(多角形・円など)の内側だけ残し、外側を切り取って見えなくします。実際に要素を切るのではなく表示領域をマスクするだけなので、値を変えれば元のコンテンツはそのまま再び現れます。
- polygonの座標を直接変えられますか?
- はい。値の入力欄で「polygon(x% y%, …)」形式で各頂点の座標を直接編集できます。xは左から、yは上からの比率(%)です。文法が間違っていると切り抜きなしで元の画像が表示されるので、安心して試せます。
- すべてのブラウザで使えますか?
- polygon・circle・ellipseなどの基本図形は最新ブラウザで幅広くサポートされていますが、レンダリングは端末ごとに異なる場合があるため、参考として確認のうえ適用してください。アップロードした画像はサーバー送信なしにブラウザ内だけで処理されます。