クリップパスを使用する方法：Path（...）は、トリミングされたグラフィック適応ボタンの幅と高さを作成しますか？

clip-path: path(...)グラフの収集適応サイズ

clip-path: path(...)でグラフをトリミングする場合、ボタンのサイズに基づいて自動的にサイズを変更することは一般的な問題です。この記事はソリューションを提供します。

重要なのは、相対ユニット（パーセンテージ）を使用することです。このようにして、ボタンのサイズがどのように変化しても、それに応じてクリッピングパスが調整されます。

まず、 path関数の座標系を理解します。ボタンの幅がwidthで高さがheightであると仮定すると、パスポイントはパーセンテージを使用して定義されます。たとえば、円を作る：

クリップパス：パス（ 'M 50％0 A 50％50％0 0 1 100％50％A 50％50％0 0 1 50％100％A 50％50％0 0 1 0 50％A 50％50％0 0 1 50％0 Z'）;

M 50% 0 、ボタンの中央の上部から始まることを意味します。 A 50% 50% 0 0 1 100% 50%ボタンの幅と高さの半径の半径などのアークを描きます。

パーセンテージでは、適応効果のために、ボタンのサイズの変更に関係なく、パスは比例して拡大されます。

他の形状をトリミングするには、形状に応じてパス座標を調整し、パーセンテージを使用して、さまざまなサイズに合うようにします。

以上がクリップパスを使用する方法：Path（...）は、トリミングされたグラフィック適応ボタンの幅と高さを作成しますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。