如何从剪切元素中删除空格？

Question

如何从剪裁的 div 中删除多余的空白？整个页面应该看起来像前 3 个 div。

overflow: hidden不行，transform:translateY也没有解决问题

或者可能有不同的方式来编写这种样式？

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>

Answer 1

所以我相应地添加了 margin-top -15vh，以便它均匀地应用于所有 div 并删除间距。

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?

css

clip-path