Search code examples
csswidthtransformviewportskew

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

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:

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;
      }
Solution

  • 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>