CSS Image Split with Two Columns and a Split in the Center - html

Question

I've looked a bit for this, and can't find it on SO. I basically have to put together a design as follows...
I'm using Bootstrap4 and I'm pretty good at CSS, and this is still giving me a bit of an issue. It should be full-screen, but I'd be open to giving it a max-width of 1400px.
My Idea: I currently had the idea of doing an element with the two elements on the side, and then use transform to rotate, and then put another element inside that has the background image and then uses transform to un-rotate it.
Here's my codepen to show what I've tried -
https://codepen.io/Gwapedwink/pen/ZaPvyo?editors=1100
<section>
<div class="image-splitter">
<div class="inner left">
<span style="background-image:url('http://placehold.it/940x240/222222/fff&text=left"></span>
</div>
<div class="inner right">
<span style="background-image:url('http://placehold.it/940x240/b4d455/fff&text=right"></span>
</div>
</div>
</section>
with the CSS of:
.image-splitter {
background-color: #f1f1f1;
position: relative; /* allows for absolute inside */
height: 240px; /* height of this section is 240px */
width: 100%;
overflow: hidden; /* important for this idea */
}
.image-splitter .inner {
position: absolute;
width:1000px;
height: 500px;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
overflow:hidden;
}
.image-splitter .inner.left {
right: 50%;
transform: rotate(5deg) translateY(-50%);
z-index:10;
}
.image-splitter .inner.right {
left: 50%;
z-index:9;
}
.image-splitter .inner span {
display: block;
position: absolute;
top: 50%;
height:350px;
width: 100%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
/* background image properties */
background-position: center;
background-size: cover;
}
.image-splitter .inner.left span {
right: -50px;
transform: rotate(-5deg) translateY(-50%);
-webkit-transform: rotate(-5deg) translateY(-50%);
}
.image-splitter .inner.right span {
left: 0;
}
You can see that there are so many issues already, and I want to know if I'm missing something that's available. You can see that the text in the codepen should be level, but it isn't.
Thanks in advance!

Answer 1

I think the vertical misalignment of the texts on the two sides is due to how placehold.it renders the text onto the images, and not related to your code. If you observe the two sample images –"left" and "right"– alone, you will notice that the baseline of the printed texts are already on different heights. Here is an overlay of the two images in question:
This thing happens because of the two strings have different overall heights. So by using texts of similar heights could solve your issue with the placeholder images. I would use square brackets to equalise the height like so: "[left]" and "[right]".
To demonstrate this, I used another approach to achieve your splitted image effect. This one makes use of the clip-path css property, which is not available on IE and Edge, so it might or might not work for you in production. On the other hand, this one simplifies the css big time.
body { margin: 0; }
.image-splitter {
position: relative;
}
.inner {
overflow: hidden;
width: 60%;
height: 240px;
background: transparent no-repeat center center / cover;
}
.right {
position: absolute;
top: 0;
right: 0;
-webkit-clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);
clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);
}
<section>
<div class="image-splitter">
<div class="inner left" style="background-image:url('http://placehold.it/940x240/222222/fff&text=[left]">
</div>
<div class="inner right" style="background-image:url('http://placehold.it/940x240/b4d455/fff&text=[right]">
</div>
</div>
</section>

Answer 2

After recommendations from #dference, it became clear to use clip-path. The issue is of browser compatibility.
So, I took his answer above and then converted it to using SVG - but also had to use foreignObject to allow Edge support.
<div class="image-splitter">
<div class="inner left" style="background-image:url('https://picsum.photos/760/240?image=1067"></div>
<div class="inner right">
<!-- SVG CLIP -->
<svg width="100%" height="240px">
<defs>
<clipPath id="clipPolygon">
<polygon points="0 240,2000 240,2000 0,50 0">
</polygon>
</clipPath>
</defs>
<foreignObject clip-path="url(#clipPolygon)" width="100%" height="100%">
<img src="https://picsum.photos/760/240?image=1049">
</foreignObject>
</svg>
<!-- / SVG CLIP -->
</div> <!-- /.inner.right -->
</div> <!-- /.image-splitter -->
Throw that in with the CSS
/* image splitter */
.image-splitter {
position: relative;
height: 230px;
overflow: hidden;
& .inner {
overflow: hidden;
width: 60%;
height: 240px;
background: transparent no-repeat center center / cover;
}
& .right {
position: absolute;
top: 0;
width:50%;
right: 0;
/*-webkit-clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);
clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);*/
/* Clipping */
-webkit-clip-path: polygon(0px 240px,2000px 240px,2000px 0px,50px 0px);
clip-path: url("#clipPolygon");
& img {
width: 100%;
min-height: 240px;
}
}
}
You can take a look at this at my codepen - and you can also see the neat way that I did the content splitter below also.