How to modify only one side of the div?

Question

How to modify only one side of the div?

Navigation

#1 by (1 votes)

1

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

html html5 css3

asked by anonymous 09.12.2017 / 20:47

1 answer

How to allocate a dynamic, user-supplied stack? Problems using return

score 1 · Accepted Answer

You can use the code below to make the effect, but you will have to adjust the CSS dimensions manually when using it in different sizes. It is 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>