CSS3 変換を使用して画像の片側だけを傾けるにはどうすればよいですか?

CSS3 Transform で片側を傾斜させる

CSS3 で画像を傾斜させるのは簡単な作業ですが、片側のみを傾斜させるのは少し難しい場合があります。

境界線プロパティを使用して提供されるソリューションは、単色の代わりに画像の背景がある場合には適していません。さらに、要素の片側だけでなく両側を歪ませると制限が生じる可能性があります。

片側の傾きを実現するには、次のアプローチを検討してください。

画像の傾きを解除する

ネストされた div 要素を使用して画像を保持します。ネストされた div に反対のスキュー値を適用して、親に適用されるスキューを打ち消します。

コード例:

<div class="container">
  <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(image.jpg); /* Replace with your image URL */
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

この設定は実質的にスキューのみを適用します。画像の片側をまっすぐにして、もう一方の側をまっすぐにしておきます。親コンテナの overflow: hidden プロパティにより、歪んだ領域は透明のままです。

以上がCSS3 変換を使用して画像の片側だけを傾けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。