我正在尝试将 2 个相互倾斜的图像重叠 HTML [重复]

【问题标题】：I am trying to overlap 2 images olbique over eachother HTML [duplicate]我正在尝试将 2 个相互倾斜的图像重叠 HTML [重复]
【发布时间】：2021-10-25 22:36:53
【问题描述】：

我已经在互联网上搜索了一段时间，但我找不到我想要的解决方案。我希望 2 张图像像这样相互倾斜

enter image description here

【问题讨论】：

最好的解决方案是编辑图像，按照您想要的方式裁剪它们并将它们合并为一张图像。这样你只需要加载一个而不是两个

标签： html css

【解决方案1】：

你可以使用clip-path属性来达到同样的效果

.img {
  width: 200px;
  height: 200px
}
.img1 {
clip-path: polygon(0 100%, 0 0, 100% 100%);
}
.img2 {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  position:relative;
  left:-202px;
}

<img src="https://pixy.org/src/477/4774988.jpg" class="img1 img">
<img src="https://pixy.org/src/480/4800346.jpg" class="img2 img">

【讨论】：