clip-path多边形在另一个

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> 

比KS！

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; 
} 
...