如何从剪辑元素中删除空格？答案

【问题标题】：How to remove whitespace from clipped elements?如何从剪辑元素中删除空格？
【发布时间】：2022-01-23 11:09:03
【问题描述】：

如何从剪辑的 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>

【问题讨论】：

标签： css clip-path

【解决方案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>

【讨论】：