How to remove whitespace from clipped elements?

How can I remove extra whitespace from the clipped divs? The whole page should look like the first 3 divs.

overflow: hidden doesn't work, transform: translateY didn't cure the problem as well.

Or maybe there's a different way how to code this style?

View it on codepen

div {
  width: 100%;
  height: 80vh;
}

div:nth-child(even) {
  background-color: rgb(182, 128, 128);
  clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 85%);
  transform: translateY(-15%);
}

div:nth-child(odd) {
  background-color: rgb(109, 127, 177);
  clip-path: polygon(0% 0%, 100% 15%, 100% 85%, 0% 100%);
}

/* selects all odd divs except the first one */
div:not(:first-child):nth-child(odd) {
  transform: translateY(-30%);
}

div:first-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

So I've added margin-top -15vh accordingly so that it applies evenly to all divs and remove spacing.

div {
  width: 100%;
  height: 80vh;
  margin-top: -15vh;
}

div:nth-child(even) {
  background-color: rgb(182, 128, 128);
  clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 85%);
/*   transform: translateY(-15%); */
}

div:nth-child(odd) {
  background-color: rgb(109, 127, 177);
  clip-path: polygon(0% 0%, 100% 15%, 100% 85%, 0% 100%);
}

/* selects all odd divs except the first one */
div:not(:first-child):nth-child(odd) {
/*   transform: translateY(-30%); */
}

div:first-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
}

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

How to remove whitespace from clipped elements?

Related

Recent Posts