透明領域を使用した片面 CSS3 スキュー変換エフェクトを作成するにはどうすればよいですか?

片側の CSS3 傾斜変換

「CSS3 片側の傾斜変換」効果の作成方法を理解すると、さまざまな Web デザイン プロジェクトに役立ちます。ただし、背景に画像を使用する場合は、単純にスキュー変換を適用しても望ましい結果が得られない可能性があることに注意することが重要です。

問題への対処

特定のこの場合、透明な傾斜領域を維持しながら画像の片側のみを傾斜させるには、CSS3 変換が必要です。実線の境界線を使用した提供されたソリューションでは、この効果を効果的に実現できません。

解決策: 逆のスキューを持つネストされた Div

目的の効果を達成するには、ネストされた Div の利用を検討してください。画像の div を使用し、親 div の値とは逆のスキュー値を適用します。たとえば、親コンテナに 20 度のスキューを適用した場合、ネストされた (画像) div に -20 度のスキュー値を与えます。

コード例:

デモンストレーションのために、コンテナとネストされた div を使用する例を次に示します。

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

Thisコードは、赤い平行四辺形のコンテナに 20 度の傾斜を作成します。その内部では、画像が -20 度の傾きでネストされた div に配置され、親コンテナに適用された傾きが効果的に反転され、その背後にある透明な傾いた領域が表示されます。

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