用纯css实现在矩形中切除一个圆

要实现在矩形中切除一个圆的效果，可以使用 CSS 的 border-radius 属性结合 overflow:hidden 属性来实现。具体实现方式如下：

HTML 代码：

<div class="rectangle"></div>

CSS 代码：

.rectangle {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.rectangle:before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 50%;
  transform: translateX(-50%);
}

解释一下上面的代码：

- 首先，我们给矩形设置了一个宽度、高度、背景颜色和圆角属性。
- 接着，我们使用 overflow:hidden 属性将矩形的溢出内容隐藏起来，这样就可以实现我们要切除圆形的效果。
- 然后，我们使用伪元素 before 来创建一个圆形的层。
- before 层使用了绝对定位，并将圆形的位置设置在矩形的上方中心点，同时设置了宽度、高度、背景颜色和圆角属性。
- 最后，通过 transform 属性将 before 层向左平移了一半，从而实现了居中的效果。

这样就实现了在矩形中切除一个圆的效果。