Two images background inline separate by diagonal border

Question

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.

Sorry but i don't want to use JS, so it's not duplicated. And the border is the diagonal of the two images not in my case (it's not a diagonal just a separation), my issue is different. — Manuel Corbet, Mar 19 '18 at 11:22

Sebastian Speitel · Accepted Answer · 2018-03-19T11:35:52.487

5

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>

edited Mar 19 '18 at 11:35

answered Mar 19 '18 at 11:25

Sebastian Speitel

7,166
2
19
38

Thank you, it seems a good way to do what I want, do you it's easy to have a border between the two images ? – Manuel Corbet Mar 19 '18 at 11:28
I just tried the border-style, but it doesn't appear between the images. – Sebastian Speitel Mar 19 '18 at 11:29
I added the border by another element, with the specific size, clipped it to the desired position and colored it with background-color. – Sebastian Speitel Mar 19 '18 at 11:36
Great ! Thank you again. – Manuel Corbet Mar 19 '18 at 11:38
@ManuelCorbet why all this complicated stuff and all these clip-path! you don't need all these, here is a better solution : https://jsfiddle.net/sm28zxw7/4/ – Temani Afif Mar 19 '18 at 11:51
@TemaniAfif perfect :) – Manuel Corbet Mar 19 '18 at 11:59
@TemaniAfif it's ok for me expect for responsive of the right image, do you think same thing is possible without use "img" tag but multiple backgrounds ? – Manuel Corbet Mar 19 '18 at 15:09
@ManuelCorbet in this case check this https://stackoverflow.com/a/49289555/8620333 i did almost the same with 5 image that you can reduce to only 2 images – Temani Afif Mar 19 '18 at 15:12
@TemaniAfif thank you i will check. – Manuel Corbet Mar 19 '18 at 15:21
Simple and clear, thank you. I needed a white borders, so I just positioned the images to be slightly separated, instead of fully overlapping. Then didn't need the border element. – goodeye Sep 08 '20 at 00:24

Two images background inline separate by diagonal border

1 Answers1

Linked

Related