CSS Clip-Pathジェネレーター
ライブプレビュー上のボックスまたはアップロードした画像上でポイントをドラッグし、凹型の切り欠きを含む任意の多角形を描画。生成された CSS clip-path: polygon(...) の値をコピーできます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
CSS clip-path は、任意の数の x/y 座標ペアからなる polygon() 関数を受け付けます。つまり、単純な矩形や円を超えた多彩な形状に要素を切り抜くことができます。難点は、座標を手入力するのが面倒で、基本的な三角形以上のものを正確に仕上げるのはほぼ不可能なことです。このジェネレーターは、その座標リストをライブプレビュー上でドラッグ可能なポイントの集合に変え、見えている形が常にCSSの生成する形になるようにします。
プレビュー上の各ポイントはボックスの幅と高さに対するパーセント値として保持されます。これは、clip-path: polygon() が内部で動作する仕組みそのものです。この方法で作成された形状は、小さなアイコンマスクから全幅のヒーローバナーまで、実際のページで要素がどんなサイズになっても正しい比率を保ちます。任意のポイントをドラッグして輪郭を変形したり、辺の近くをクリックしてその位置にポイントを追加したり、既存のポイントをダブルクリックして削除したりできます。エディタは常に最低3点を保持します。多角形はそれ未満の点数では存在できないからです。
同梱の6つのプリセットは、clip-pathが凸形状以上に使えることを示すために選ばれました。星形と矢印は内向きの凹角を利用し、吹き出しは普通の矩形から三角形のしっぽを切り抜き、券片は本物のミシン目入りチケットのように向かい合う辺に2つの切り欠きをあけます。どのプリセットを読み込んでも、そこからさらにドラッグを続けられます。エディタが開始時の形状に固定することはありません。
ご自身の画像をアップロードして、単なるボックスではなく実際のコンテンツ上でクリップパスをプレビューできます。アップロードを省略すると、プレビューはストライプパターンにフォールバックし、切り抜かれた形状がどちらの場合も明確に見えます。当サイトのすべてのツールと同様に、この処理はすべてブラウザ内でローカルに実行されます。画像がデバイスから外部に出ることは一切なく、ページの読み込み後はオフラインでも動作し続けます。