剪辑路径多边形在另一个上

Question

在我的CSS代码中，我使用了2个剪辑路径polygon()，但是第一个下面的第二个不会粘在第一个div的左下角。这是截图...

...和我的代码：

CSS

.container1 {
    z-index: 1;
    background-image: url('/assets/images/esron.gif');
    background-size: cover;
    width: 100vw;
    height: 50vh;
    clip-path: polygon(0px 40vh,100vw 50vh,100vw 0,0 0);
}

.cd-container {
    width: auto;
    height: 30vh;
    background-color: white;
    text-align: center;
    padding: 20px;
    font-family: 'Ewert', cursive;
    font-size: 40px;

    clip-path: polygon(0px 10vh,100vw 20vh,100vw -30vh,0 0)
}

HTML

<div class="container1">

</div>

<div class="cd-container">
  <p>
    Lorem Ipsum
  </p>
</div>

谢谢！

Answer 1

那是因为clip-path不会改变div的hitbox，它只会在它们之上放置一个掩码。您可以通过包装.container1并将其背景颜色设置为白色来解决此问题：

<强> HTML

<div class="wrapper">
    <div class="container1"></div>
</div>
<div class="cd-container">
    ...
</div>

<强> CSS

.wrapper {
    background-color: white;
}
...