两个图像背景内联，由对角线边框分隔[重复]答案

【问题标题】：Two images background inline separate by diagonal border [duplicate]两个图像背景内联，由对角线边框分隔[重复]
【发布时间】：2018-03-19 11:18:27
【问题描述】：

我正在尝试使用 CSS3 获得此结果（不使用 JS） - 2 个图像（1 个左，1 个右）由一个边框分隔，而不是垂直（有一个角度）

我想做的东西:)

我尝试了很多事情都没有成功。

【问题讨论】：

分享你尝试过的代码...
对不起，我不想用JS，所以没有重复。并且边框是两个图像的对角线，在我的情况下不是（它不是对角线，只是一个分隔），我的问题是不同的。

标签： css background-image

【解决方案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>

【讨论】：

谢谢，这似乎是做我想做的事情的好方法，你是不是很容易在两个图像之间有一个边框？
刚试了border-style，图片之间没有出现。
我通过另一个元素添加了边框，具有特定的大小，将其剪切到所需的位置并用背景色着色。
太棒了！再次感谢您。
@ManuelCorbet 为什么所有这些复杂的东西和所有这些剪辑路径！你不需要所有这些，这里有一个更好的解决方案：jsfiddle.net/sm28zxw7/4