html - 如何从 css 倾斜这个形状？

Question

我试过像这个积木一样制作，但无法按照设计制作。我怎样才能做到？你能帮助我吗？这是所需的 block

和我试过的代码:

.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

我会考虑像这样的多个背景和一些边框:

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>

或者使用更多元素和一些转换的更简单的方法:

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>