'How to make a polygon() sized divs connect to eachother and also make it responsive for all sizes

How can i make this 3 divs connect to eachother and make it responsive for all devices?

*{
    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>

Thanks alot, any sort of way is accepted!

htmlcss


Solution 1:[1]

Use clip-path only on the second div and consider negative margin:

* {
  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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif

Related Questions