如何在Overlay CSS的底角创建一个空洞区域
我尝试在覆盖的底角创建一个洞区域,如下图所示,但仍有问题。
以下是代码的一个示例
<div className="container h-screen bg-overlay fixed z-50 opacity-90 holes">
</div>
.holes::before {
content: "";
display: block;
/* Scale */
width: 50px;
padding: 10px 0px;
/* Position */
position: absolute;
top: 90%;
right: 60%;
z-index: 2;
/* Border */
border: solid 80px rgb(255,255,255);
border-radius: 50%;
opacity: 0.7;
}
但上面的代码仍然不适合,因为它没有在左下角打洞,而是用伪类打了一个新洞
解决方案
您可以使用css掩码在具有径向渐变的元素上切割一个洞作为掩码图像。您可以将带有背景径向渐变的洞周围的黄色边框放在同一位置。
此代码片段的容器背景为洋红色,因此您可以看到一个真正的‘洞’是用下面显示的任何东西切割的(尽管背景径向渐变将用透明层覆盖它)。
注意:整页查看代码段
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.container {
background-color: magenta;
display: inline-block;
width: 100vw;
height: 100vh;
}
.div {
-webkit-mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
background-color: skyblue;
background-image: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, yellow 50px, yellow 53px, transparent 53px, transparent 100%);
width: 100%;
height: 300px;
margin: 0;
padding: 0;
}
<div class="container">
<div class="div"></div>
</div>
相关文章