How To Skew From Css For This Shape?

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:

Solution 1:

I would consider multiple background and some border like this like this:

body {
  margin:0;
}
.box {
  padding:40pxcalc(100% - 250px) 10px20px;
  box-sizing:border-box;
  border-top:30px solid lightblue;
  border-bottom:5px solid yellow;
  height:350px;
  background:
  linear-gradient(120deg, lightblue 280px,transparent 280px)00/100%40px no-repeat,
  linear-gradient(120deg,white 250px,yellow 250px,yellow 280px,transparent 280px)00/100%100% no-repeat,
  url(https://lorempixel.com/1000/1000/) 00/cover no-repeat;
}

<divclass="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/) 00/cover no-repeat;
}
.content {
  padding:20px5px030px;
  box-sizing:border-box;
  width:40%;
  border-top:20px solid lightblue;
  background:linear-gradient(yellow,yellow) 100%0/10px100% no-repeat;
  transform:skew(-20deg);
  transform-origin:top left;
  background-color:#fff;
}
.contentspan{
  display:inline-block;
  transform:skew(20deg);
}

<divclass="box"><divclass="content"><span> lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span></div></div>

Solution 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.