画像の背景を使用した片面 CSS3 スキュー変換エフェクトを作成するにはどうすればよいですか?

片側の変形

画像が背景として使用されている場合、「CSS3 Transform Skew One Side」エフェクトの作成が課題となります単色の代わりに。提供されているソリューションはグラデーションの使用を示していますが、画像を利用したい人には適していない可能性があります。

画像の背景が歪んでいる場合のソリューション

目的の効果を達成するには画像の背景を使用する場合は、次のアプローチを検討してください:

• 親Div: 画像を含む親 div にスキュー変換を適用します。たとえば、20 度のスキューが適用される場合、CSS コードは次のようになります。

#parallelogram {
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
}

• Nested Div for Image: 内にネストされた div を作成します。親 div を傾けて、この div 内に画像を配置します。このネストされた div は、画像の歪みを解消するために機能します。以下の例では、親 div のスキューを打ち消すために、ネストされた div に -20 度のスキューが適用されます。

.image {
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

逆のスキュー値を持つネストされた div を使用すると、次のことができます。斜めの領域の透明度を維持しながら、片側で斜めの効果を効果的に実現します。この手法は、以下のコード例で示されています。

<div class="container">
  <div></div>
</div>

以上が画像の背景を使用した片面 CSS3 スキュー変換エフェクトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。