how to make a hole area in the bottom corner of the overlay css(如何在Overlay CSS的底角创建一个空洞区域)
本文介绍了如何在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>
这篇关于如何在Overlay CSS的底角创建一个空洞区域的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:如何在Overlay CSS的底角创建一个空洞区域
基础教程推荐
猜你喜欢
- 动态更新多个选择框 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 我什么时候应该在导入时使用方括号 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01