剪辑路径多边形覆盖另一个
clip-path polygon over another
在我的 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>
谢谢!
那是因为clip-path
没有改变div的hitbox,它只是在它们上面放了一个遮罩。您可以通过包装 .container1
并将其背景颜色设置为白色来解决此问题:
HTML
<div class="wrapper">
<div class="container1"></div>
</div>
<div class="cd-container">
...
</div>
CSS
.wrapper {
background-color: white;
}
...
在我的 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>
谢谢!
那是因为clip-path
没有改变div的hitbox,它只是在它们上面放了一个遮罩。您可以通过包装 .container1
并将其背景颜色设置为白色来解决此问题:
HTML
<div class="wrapper">
<div class="container1"></div>
</div>
<div class="cd-container">
...
</div>
CSS
.wrapper {
background-color: white;
}
...