两个图像背景内联由对角线边框分隔

Question

我试图用 CSS3 得到这个结果（不使用 JS） - 2 张图片（左 1 张，右 1 张）由非垂直（有角度）的边框分隔

我想做的东西:)

我试了很多东西都没有成功。

Answer 1

您可以使用 clip path

.right {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%);
  clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%);
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
  clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
}

border {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 300px;
  background-color: black;
  -webkit-clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%);
  clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%);
}

<img class="left" src="https://picsum.photos/400/300?random">
<img class="right" src="https://picsum.photos/400/300">
<border>

两个图像背景内联由对角线边框分隔

Two images background inline separate by diagonal border

css

background-image