如何创建具有透明区域的单面 CSS3 倾斜变换效果？

一侧的 CSS3 倾斜变换

了解如何创建“CSS3 一侧倾斜变换”效果对于各种网页设计项目非常有用。但是，请务必注意，在使用图像作为背景时，简单地应用倾斜变换可能不会产生所需的结果。

解决问题

在您的特定情况下在这种情况下，您需要 CSS3 转换来仅倾斜图像的一侧，同时保持透明的倾斜区域。所提供的使用实心边框的解决方案无法有效实现此效果。

解决方案：具有相反倾斜的嵌套 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中文网其他相关文章！