如何使用 CSS3 变换仅倾斜元素的一侧？

CSS3 变换仅一侧倾斜

CSS 变换是一种强大的工具，可用于操纵网页上元素的外观。最通用的变换之一是倾斜变换，它可用于以指定角度倾斜元素。

但是，默认情况下，倾斜变换同等地影响元素的两侧。在某些情况下，这可能会受到限制，例如当您只想倾斜元素的一侧（例如背景图像）时。

幸运的是，有一种方法可以使用 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背景，宽度和高度分别为 150px 和 100px。 div 将向右倾斜 20 度并包含图像。通过应用相反的倾斜变换（-20deg），图像将不再倾斜。

以上是如何使用 CSS3 变换仅倾斜元素的一侧？的详细内容。更多信息请关注PHP中文网其他相关文章！