Clip-path Generator

使い方

1. 形状関数を選びます：polygon・circle・ellipse・inset。
2. polygon では頂点を直接編集します。各頂点は x と y をスペースで区切り、頂点同士はカンマで区切ります（例: 50% 0%, 100% 100%, 0% 100%）。
3. プリセットを押すと、三角形・台形・菱形・五角形・六角形・星型・矢印・シェブロン・吹き出しが読み込めます。
4. circle は半径と中心、ellipse は 2 つの半径と中心、inset は 4 辺と任意の丸めを設定します。
5. プレビューのボックスに同じ clip-path が適用され、現在の値が下に表示されます。
6. 出力カードから CSS をコピーします。

こんなときに

• セクションの区切り: ページのsection 間を斜めや矢印形の帯にする。
• カード・画像のマスク: 写真を六角形・星型・吹き出しに切り抜く。
• リボン・バッジ: 価格表や機能の呼び出しにシェブロン形。
• アバターの枠: border-radius の工夫なしで circle/ellipse に切り抜く。
• clip-path の学習: 各頂点がボックスのどの位置に対応するか確認できる。

プライバシーについて

頂点と半径はこのページ内で解析され、CSS 文字列に再構成されます。データの送信はなく、オフラインでも動作します。

FAQ

Q: どの形状を作れますか？ A: 頂点を編集できる polygon()、circle()、ellipse()、任意の丸め付き inset() です。プリセットは三角形・台形・菱形・五角形・六角形・星型・矢印・シェブロン・吹き出しに対応します。

Q: 受け付けられる頂点の書き方は？ A: 各頂点は x と y をスペースで区切り、頂点同士はカンマで区切ります。値はパーセントまたは px・em・rem・vw・vh などの長さで、多角形の頂点は 3〜20 個が必要です。ツールは構文を検査し、最初の問題を報告します。

Q: プレビューは最終的な描画ですか？ A: はい。プレビューはグラデーション背景に同じ clip-path を適用した実物の要素です。パーセントはプレビュー枠に対する値なので、サイズの違う要素に貼ると結果が変わります。

Q: 出力に -webkit- の行があるのは？ A: 現在のブラウザは接頭辞なしの clip-path を基本形状に対応しています。接頭辞の行は古い Safari と Android のための残りで、非対応環境でも害はありません。