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