CSS クリップパス ジェネレーター

CSS クリップパスは、任意の数の X/Y 座標ペアで構成される Polygon() 関数を受け入れます。これは、ほとんどの人が手を伸ばす単純な長方形や円をはるかに超えた形状にボックスを切り分けることができることを意味します。問題は、これらの座標を手で入力するのは面倒で、基本的な三角形以外のものを正しく入力するのはほぼ不可能であるということです。このジェネレーターは、その座標リストをライブ プレビュー上でドラッグ可能なポイントのセットに変換するため、表示される形状は常に CSS が生成する形状になります。

プレビュー上のすべてのポイントは、ボックスの幅と高さのパーセンテージとして保存されます。これは、clip-path:polygon() 自体が内部でどのように機能するかとまったく同じです。この方法で構築されたシェイプは、小さなアイコン マスクから全幅のヒーロー バナーまで、実際のページ内で要素がどのようなサイズになるかに関係なく、正しい比率を保ちます。任意の点をドラッグしてアウトラインの形状を変更し、エッジの近くをクリックしてクリックした場所に新しい点を追加するか、既存の点をダブルクリックして削除します。これより少ない数ではポリゴンが存在できないため、エディタでは常に少なくとも 3 つの点が保持されます。

バンドルされた 6 つのプリセットは、クリップ パスが凸形状以上のことができることを証明するために選ばれています。星と矢印はどちらも内側を向く反射角に依存し、吹き出しは単純な長方形から三角形の尾を切り出し、チケットの半券は本物の穴あきチケットのように反対側の端に 2 つの切り込みを入れます。任意のプリセットをロードし、そこからドラッグを続けます。エディターでは開始時の形状にロックされることはありません。

独自の画像をアップロードして、無地のボックスではなく実際のコンテンツに対してクリップパスをプレビューするか、アップロードを完全にスキップすると、プレビューが縞模様のパターンに戻り、どちらの場合でもカット形状がはっきりと見えるようになります。このサイトのすべてのツールと同様、すべてがブラウザー内でローカルに実行されます。画像がデバイスから送信されることはなく、ページが読み込まれるとジェネレーターはオフラインで動作し続けます。