How to modify only one side of the div?

Question

Hello! I am trying to make an effect of transforming only one side of the div as in the following image, I tried using skew but it modifies the entire div, see how I would like it to stay

Answer 1

You can use the code below to do the effect, but you will need to adjust the CSS dimensions manually when using in different sizes. It’s easy, just adjust the margin-left, left, width and height of divs:

#conteudo{
   display: block;
   position: relative;
   margin-left: 5px;
   width: 636px;
   height: 200px;
   float: left;
}

.box { 
   width: 684px;
   height: 200px;
   border-radius: .5em;
}

.img1 {
   position: absolute;
   left: -47px;
   background: url(https://i.stack.imgur.com/G0aEM.jpg) no-repeat right;
}

.img2_conteudo {
   width: 383px;
   border-right: 10px solid #fff;
   overflow: hidden;
   display: inline-block;
   transform: skewX(-20deg);
   margin-left: -76px;
}

.img2 {
   transform: skewX(20deg);
   margin-left: 63px;
   background: url(https://i.stack.imgur.com/S0Uh7.jpg) no-repeat;
   pointer-events: auto;
}

<div id="conteudo">
   <div class="box img1"></div>
   <div class="img2_conteudo">
       <div class="box img2"></div>
   </div>
</div>