Clippy – CSS クリップパスを簡単に描画するクリッピング パスtool_html/css_WEB-ITnose

Clippy は、CSS クリップ一致属性描画ツールであり、さまざまな幾何学的形状を簡単に描画するために使用できます。

clip-path は CSS のクリッピング属性であり、この属性を通じて PS マスクと同じ効果を実現できます。クリップパスを使用して多角形のカットパターンを作成する場合は、次のように座標位置を計算する必要があります。

.element { Clip-path: Polygon(x1 y1, x2 y2, x3 y3, …) ; }

コードからもわかるように、この座標を計算するのは非常に面倒なので、この問題を解決するには Clippy を使用します。

ウェブサイト名: Clippy

ウェブサイトアドレス: http://bennettfeely.com/clippy/

ヒントを使用する

1. カラー ポイントの 1 つを押し続けると、以下のコードがそのポイントの座標位置を自動的に通知します。

2. 右側のグラフィックの「カスタム ポリゴン」を選択して、独自の形状を描画します。

エディターのテスト中に、カスタマイズできない場合があり、正規化するにはブラウザーを更新する必要があることに注意してください。

カスタムシェイプ:

3. コードペンのロゴアイコンをクリックすると、編集用のコードペンにジャンプします。これは非常に便利です。