html - 剪辑路径多边形覆盖另一个

Question

在我的 CSS 代码中，我使用了 2 个 clip-path 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，它只是在它们上面放了一个 mask 。您可以通过包装 .container1 并将其背景色设置为白色来解决此问题:

HTML

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

CSS

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