How to make slanted images fit within 100% of viewport width? - css

Question

I am having some difficulty getting slanted images to fit within 100% of my viewport width. Specifically,
div two-images-outer and two-images-inner are currently outside the 100% width of the viewport. I want to get it in line with the rest of the sections below (see image). Any help is greatly appreciated!
Image to illustrate problem of image div extending beyond 100% width of the viewport the image div is extending in order to obtain the skewed slant:
HTML:
<section>
<div class="three-images-wrapper">
<div class="three-images">
<div class="featured-image-outer">
<div class="featured-image-inner"
style="background-image: url(../img/servicesheader1.jpeg);">
<h1>Services</h1>
</div>
</div>
<div class="two-images">
<div class="two-images-outer">
<div class="two-images-inner">
<div class="image1"
style="background-image: url('../img/servicesheader2.jpeg');">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
.three-images-wrapper {
height: 300px;
width: 100%;
}
.three-images {
margin-bottom: 4rem;
min-height: 300px;
position: relative;
}
.featured-image-outer {
position: absolute;
margin-left: -15%;
min-height: 360px;
overflow: hidden;
width: 76.5%;
-ms-transform: skew(-15deg,0deg); /* IE 9 */
-webkit-transform: skew(-15deg,0deg); /* Safari */
transform: skew(-15deg,0deg); /* Standard syntax */
}
.featured-image-inner,
.two-images-inner {
background-size: cover;
background-position: center;
}
.featured-image-inner {
left: 50px;
position: absolute;
top: 0;
height: 300px;
width: 100%;
-ms-transform: skew(15deg,0deg); /* IE 9 */
-webkit-transform: skew(15deg,0deg); /* Safari */
transform: skew(15deg,0deg); /* Standard syntax */
}
.two-images {
min-height: 300px;
position: relative;
right: -63vw;
top: 0;
width: 55%;
}
.two-images-outer {
min-height: 130px;
overflow: hidden;
position: absolute;
width: 100%;
-ms-transform: skew(-15deg,0deg); /* IE 9 */
-webkit-transform: skew(-15deg,0deg); /* Safari */
transform: skew(-15deg,0deg); /* Standard syntax */
}
.two-images-inner {
-ms-transform: skew(15deg,0deg); /* IE 9 */
-webkit-transform: skew(15deg,0deg); /* Safari */
transform: skew(15deg,0deg); /* Standard syntax */
}
.image1
{
position: relative;
height: 300px;
right: 19%;
width: 100%;
background-position: center;
background-size: cover;
background-clip: content-box;
}

Answer 1

You can use clip-path and it will be easier
.container {
height: 300px;
display:flex;
}
.container > * {
background-position: center;
background-size: cover;
flex:1;
}
.container > :first-child {
clip-path:polygon(0 0,100% 0,calc(100% - 100px) 100%,0 100%);
margin-right:-40px;
}
.container > :last-child {
clip-path:polygon(100px 0,100% 0,100% 100%,0 100%);
margin-left:-40px;
}
<div class="container">
<div style="background-image: url(https://picsum.photos/id/10/800/800);">
<h1>Services</h1>
</div>
<div style="background-image: url(https://picsum.photos/id/14/800/800);">
</div>
</div>