CSSのクリップパス屬性を、畫像やSVGに依存せずに、三角形、円形ノッチ、ポリゴンなどのカスタム形狀に作物要素に使用します。その利點には、次のものが含まれます。1。円、楕円、ポリゴンなどのさまざまな基本的な形狀をサポートします。 2。レスポンシブ調(diào)整とモバイル端子に適応可能。 3.アニメーションが簡単で、HoverまたはJavaScriptと組み合わせて動的効果を?qū)g現(xiàn)できます。 4.レイアウトフローには影響せず、ディスプレイエリアのみを収穫します。一般的な使用法は、円形のクリップパス：サークル（中央で50px）および三角クリップパス：ポリゴン（50％0％、100％100％、0％100％）などです。メモには以下が含まれます：良好な互換性ですが、古いIEをサポートしていません。複雑な形狀はパフォーマンスに影響を與える可能性があります。クリップパスは変換後に有効になり、回転とスケーリングで変化しません。クリップパス値を動的に変更することにより、ボタンの拡張やカードの変形などのインタラクティブな効果も実現(xiàn)できます。

直接言えば、重要なポイント：CSSのclip-path屬性を使用して、寫真やSVGに依存せずに、三角形、ポリゴン、円形のノッチなどの要素のさまざまなカスタムシェイプを簡単にトリミングできます。

なぜクリップパスを選ぶのですか？

Webデザインでは、畫像や背景を非長方形の形狀に見せる必要がある場合があります。過去に使用されていた一般的な方法は、PNG畫像またはSVGマスクを使用することでしたが、これらの方法は十分に柔軟ではなく、メンテナンスが容易ではありません。 clip-path純粋なCSSソリューションを提供します。

• 複數(shù)の基本的な形狀（円、楕円、ポリゴンなど）をサポートします
• 応答的に調(diào)整できます
• 簡単にアニメーション化できます（すべてのブラウザがトランジションをサポートするわけではありませんが）
• それはレイアウトフローに影響しません、それは単なる「トリミングされた」ディスプレイ部分です

一般的な形を書く方法は？

円と楕円

クリップパス：円（中央で50px）;
クリップパス：楕円（20％30％で50px 30px）;

このタイプは、アバター、小さなアイコン、および円形の収穫が必要な他の場所を作るのに適しています。パラメーターは、それぞれ半徑と中心點位置です。

ポリゴンポリゴン（）

これは、最も柔軟で一般的に使用されるタイプであり、三角形、臺形、星などのさまざまな複雑な形狀を作成できます。

クリップパス：ポリゴン（50％0％、100％100％、0％100％）;

上記の例では、長方形を三角形にカットします。括弧內(nèi)の座標(biāo)は、各頂點の位置を表し、グラフを形成するために接続されています。

ヒント：座標(biāo)の書き方がわからない場合は、いくつかのオンラインツールを使用して、 Clippyなどの世代を支援できます。

実際のアプリケーションのいくつかのメモ

• 互換性：主流のブラウザは基本的にサポートしていますが、IEの古いバージョンと互換性がありません。プロジェクトがIEをサポートする必要がある場合は、代替ソリューションを提供することをお勧めします。
• レスポンシブ処理：パーセンテージユニットを使用すると、モバイル端子に適したコンテナで作物エリアが変更できます。
• パフォーマンスへの影響：複雑なポリゴンは、特にアニメーションでテストする場合、レンダリングパフォーマンスに影響を與える可能性があります。
• 変換との関係： clip-path要素変換後に有効になります。したがって、回転、スケーリング、その他の効果を使用すると、作物領(lǐng)域も変わりません。

興味深い相互作用効果を作成する方法は？

ホバーまたはJavaScriptを組み合わせて、 clip-pathを動的に変更して、拡張や変形などのアニメーション効果を?qū)g現(xiàn)できます。

たとえば、ボタンをホバリングした後にすべてのコンテンツを徐々に表示する効果：

 。ボタン {
  クリップパス：ポリゴン（0 0、100％0、100％30％、0 30％）;
  トランジション：クリップパス0.3s容易さ。
}

.button：Hover {
  クリップパス：ポリゴン（0 0、100％0、100％100％、0 100％）;
}

これにより、カード、ナビゲーションメニューなどのシーンに適した小さなストリップからゆっくりと「拡大」する視覚効果が可能になります。

基本的にそれだけです。いくつかの一般的な形狀の執(zhí)筆をマスターし、少し想像力を加えてください。 clip-pathを使用して、多くの興味深いページ効果を作成できます。

以上がCSSクリップパスでカスタムシェイプを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。