如何使polygon()大小的div相互连接，并使其对所有大小都有响应

Question

如何使这3个div相互连接并对所有设备做出响应？

*{
margin :0;
padding :0;
}
.first{
height: 250px;
width: 100%;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
background-color : red;
}
.middle{
background-color : green;
height: 250px;
width: 100%;
clip-path: polygon(0 18.5%, 100% 0, 100% 100%, 0 80%);
}
.last{
height: 250px;
width: 100%;
clip-path: polygon(0 100%, 100% 100%, 100% 20%, 0 0);
background-color : yellow;
}

<div>
<div class="first"></div>
<div class="middle"></div>
<div class="last"></div>
</div>

非常感谢，任何方式都可以接受！

Answer 1

仅在第二个div上使用clip-path，并考虑负裕度：

* {
margin: 0;
padding: 0;
}
.first {
height: 250px;
background-color: red;
}
.middle {
background-color: green;
height: 250px;
clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 calc(100% - 40px));
margin:-40px 0;
}
.last {
height: 250px;
background-color: yellow;
}

<div>
<div class="first"></div>
<div class="middle"></div>
<div class="last"></div>
</div>