时间戳

首页 > 解决方案 > 如何在覆盖css的底角制作一个孔区域

html - 如何在覆盖css的底角制作一个孔区域

问题描述

我尝试在覆盖层的底角制作一个孔区域，如下图所示，但仍然遇到问题。

期望的最终外观示例1

这是代码示例

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

但是上面的代码仍然不适合，因为它没有在左下角打洞，而是用伪类打了一个新洞

标签： htmlcssoverlaycornerradius

解决方案

您可以使用 CSS 蒙版在元素中以径向渐变作为蒙版图像切割一个洞。您可以将带有背景径向渐变的孔周围的黄色边框放在同一位置。

这个片段有一个洋红色的容器背景，所以你可以看到一个真正的“洞”被切割成下面显示的任何东西（尽管背景径向渐变会用透明层覆盖它）。

注意：在完整页面中查看片段

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

推荐阅读