◇

CSS clip-path ジェネレーター

要素を一般的な図形に切り抜き、clip-path の CSS をコピーできます。

ファイルはこの端末に残ります

ファイルはブラウザ内で処理され、アップロードされません。ツールの実行に必要なコードと素材はダウンロードされます。アカウントも追跡もありません。

ダウンロードを使うと、このツールを1つのHTMLファイルに保存してオフラインで使えます。

図形

出力

具体例を試す

六角形を選ぶと clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); になります。各組は要素内の x と y の位置なので、図形は要素の幅と高さに合わせて伸縮します。

クリップは要素の一部を隠しますが、レイアウト上のボックスは残ります。周囲の要素は動かず、隠れた角はクリックを受け付けなくなります。枠線やボックスシャドウも切り取られるため、影が必要なら外側の要素に drop-shadow フィルターを付けてください。

図形を選ぶと、対応する clip-path ルールでプレビュー枠を即座に切り抜き、そのまま使える CSS をコピーできます。プレビューはすべてブラウザ内でリアルタイムに更新されます。

ポリゴンの clip-path はどのように機能しますか？

各点は枠に対する x y のパーセント値の組で、ブラウザがそれらを順番に結び、輪郭の内側の領域だけを表示します。

すべてのブラウザが clip-path に対応していますか？

ポリゴン、円、楕円、inset の図形はすべての最新ブラウザでサポートされているため、生成された CSS はプレフィックスなしで動作します。