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?
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>>Solution :
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>