如何仅使用 CSS3 创建透明的半圆切口？

使用 CSS3 创建透明半圆切口

实现所需的透明半圆形状，其中所有元素保持黑色或透明，可以采用利用 CSS ::after 伪属性的技术。

技巧在于黑色矩形的巧妙组合和一个圆圈。该矩形作为基础，提供黑色背景。在此之上，使用溢出属性将圆绝对定位并部分隐藏。

此技术的关键是添加到圆中的 ::after 伪元素。将其宽度和高度设置为 100px，形成一个完美的半圆。应用了 40px 厚的边框，但背景保持透明。

通过调整 ::after 伪元素的位置，可以将半圆向上移动以与矩形边缘对齐，从而创建剪切的错觉。

下面是演示此技术的示例代码：

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle::after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

<div class="rect">
  <span class="circle"></span>
</div>

以上是如何仅使用 CSS3 创建透明的半圆切口？的详细内容。更多信息请关注PHP中文网其他相关文章！