CSS クリップパス生成ツール
三角形、ひし形、六角形、星形から始め、座標をパーセントで調整して CSS をコピーします。
プリセットを選ぶと点の一覧が置き換わります。自由に編集する前に「独自の点を保持」を選んでください。
プレビューの色はコピーする clip-path 宣言に含まれません。
各行に1点を X, Y の形式で0～100の百分率として入力します。点は3～12個で、最初と最後は自動的につながります。
プレビュー
百分率は要素のボーダーボックスを基準にします。凹多角形も使えます。自己交差する経路や輪郭の描画はブラウザー間で異なる場合があります。古いブラウザーへの対応が必要なら代替形状や切り抜かない内容を使ってください。
使い方
使い方
- プリセットを選ぶか、カスタム点を使います。
- 最大 12 個の X、Y パーセント座標を編集して形状を確認します。
- CSS をコピーし、対象要素とブラウザーでテストします。
編集できるパーセントポリゴン
三角形、ひし形、六角形、五芒星を出発点にできます。カスタム点を保持すると一覧を編集できます。空でない各行に 0～100 の X、Y が必要で、3～12 点を入力できます。
描画と対応範囲
CSS は要素の border box を基準にします。凹ポリゴンは有効ですが、自己交差の塗りつぶしや境界のアンチエイリアスはブラウザーごとに異なる場合があります。現在は広く対応しますが、古い環境では未対応または限定的です。重要な内容を輪郭だけに頼らせないでください。
よくある質問
あわせて知りたいこと
パーセントの基準は何ですか？
要素の border box です。切り抜き前の 50%、50% はその中心です。
凹形や自己交差形を作れますか？
凹ポリゴンは有効です。自己交差はエンジンで異なる場合があるため、対象を確認し、一貫性が必要なら単純な形を選んでください。
SVG や画像に書き出せますか？
いいえ。CSS 宣言とローカルプレビューのみです。既存 HTML 要素に適用するか、SVG には専用ツールを使ってください。