Two images background inline separate by diagonal border [duplicate]

问题

This question already has answers here:

How to combine two images diagonally using CSS/JavaScript? (3 answers)

CSS3 slanted div with background image, with image behind the whole thing (2 answers)

5 images symmetrically seperated with diagonal lines (1 answer)

Closed last year.

I'm trying to have this result with CSS3 (not use JS) - 2 images (1 left, 1 right) seperate by a border not vertically (with an angle)

The thing I want to make :)

I tried a lot of things with no success.

回答1:

You can use a 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>

来源：https://stackoverflow.com/questions/49361690/two-images-background-inline-separate-by-diagonal-border