html - 从div中切出的透明半圆

Question

我想只使用 CSS3 制作一个透明的切出的半圆形。唯一的要求是构成形状的所有元素必须是黑色或透明。

我不能在上面使用带有白色圆圈的黑色矩形，因为半圆必须是透明的并且让背景显示出来。

想要的形状:

Answer 1

也许可以用 CSS ::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">&nbsp;<span class="circle"></span></div>

View on JSFiddle