How to skew from css for this shape? - html

Question

I have tried to make like this block but wasn't able to make as in the design. How can I make it? Can you help me? Here is desired block
and code I have tried:
.section-1 {
background: green;
height: 100px;
}
.section-2 {
display: flex;
align-items: center;
}
.col-img {
margin-top: -40px;
position: relative;
}
.col-img:after {
top: 40px;
position: absolute;
right: 100%;
width: 10px;
background: purple;
content: '';
bottom: 0;
}
.col-img img{
width: 100%;
vertical-align: top;
}
.section-2 .col {
width: 50%;
}
<div class="section-1">
</div>
<div class="section-2">
<div class="col">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum voluptatem beatae quia facilis nobis, dolore quidem nostrum! Blanditiis eveniet dolor a, laudantium repudiandae rem commodi ea adipisci. Eius, obcaecati rerum.</p>
</div>
<div class="col col-img">
<img src="http://via.placeholder.com/650x650" alt="">
</div>
</div>

Answer 1

I would consider multiple background and some border like this like this:
body {
margin:0;
}
.box {
padding:40px calc(100% - 250px) 10px 20px;
box-sizing:border-box;
border-top:30px solid lightblue;
border-bottom:5px solid yellow;
height:350px;
background:
linear-gradient(120deg, lightblue 280px,transparent 280px)0 0/100% 40px no-repeat,
linear-gradient(120deg,white 250px,yellow 250px,yellow 280px,transparent 280px)0 0/100% 100% no-repeat,
url(https://lorempixel.com/1000/1000/) 0 0/cover no-repeat;
}
<div class="box">
lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum
</div>
Or more easier way with more element and some transformation:
body {
margin:0;
}
.box {
box-sizing:border-box;
border-top:30px solid lightblue;
border-bottom:5px solid yellow;
height:100vh;
display:flex;
background:url(https://lorempixel.com/1000/1000/) 0 0/cover no-repeat;
}
.content {
padding:20px 5px 0 30px;
box-sizing:border-box;
width:40%;
border-top:20px solid lightblue;
background:linear-gradient(yellow,yellow) 100% 0/10px 100% no-repeat;
transform:skew(-20deg);
transform-origin:top left;
background-color:#fff;
}
.content span{
display:inline-block;
transform:skew(20deg);
}
<div class="box">
<div class="content">
<span> lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
</div>
</div>

Answer 2

You will want to use the CSS3 transform property, to skew your image. You can use either the skewX() or skewY() functions, or you can rotate().
.col-img {
transform:rotate(25deg);
}
Hope this helps.