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

CSS3 Transform Skew One Side Only

CSS 変換は、Web ページ上の要素の外観を操作するために使用できる強力なツールです。最も汎用性の高い変換の 1 つはスキュー変換で、指定した角度で​​要素を傾けるのに使用できます。

ただし、デフォルトでは、スキュー変換は要素の両側に均等に影響します。これは、背景画像などの要素の片側のみを傾斜させたい場合など、場合によっては制限となる可能性があります。

幸いなことに、CSS を使用して要素の片側のみを傾斜させる方法があります。 。傾斜させたい要素にネストされた div を使用すると、親 div に傾斜変換を適用してから、その逆の傾斜変換を子 div に適用できます。これにより、要素の片側のみを効果的に傾斜させることができます。

要素の片側のみを傾斜させる方法の例を次に示します。

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-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;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

この CSS は、赤色の div を作成します。背景、幅と高さはそれぞれ 150 ピクセルと 100 ピクセルです。 div は右に 20 度傾斜し、画像が含まれます。画像は、逆のスキュー変換 (-20 度) を適用することで歪みが解消されます。

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