如何從剪輯的 div 中洗掉多余的空格？整個頁面應該看起來像前 3 個 div。
overflow: hidden 不起作用，轉換： translateY 也沒有解決問題。
或者也許有一種不同的方式來編碼這種風格？
在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>uj5u.com熱心網友回復：
所以我相應地添加了 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419386.html
標籤：