如何从这个形状的css倾斜？

Question

我试图像这个块一样制作，但却无法像设计那样制作。我该怎么做？你能帮助我吗？这是理想的块

我试过的代码：

// MenuItem.ts
static registerUrl:Subject<MenuItem> = new Subject();
// instead of service.registerUrl():
MenuItem.registerUrl.next(this)

// service onInit
MenuItem.registerUrl.subscribe(item => {
    // do stuff with item.url
});

.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%;
}

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>

Answer 2

您需要使用CSS3 transform属性来扭曲图像。您可以使用skewX()或skewY()功能，也可以使用rotate()。

.col-img {
    transform:rotate(25deg);
}

希望这有帮助。