如何用CSS制作带小圆角缺口的圆形？

可以用容器+伪元素的方式快速实现这种效果，核心是用和背景色一致的圆角伪元素在圆形上“挖”出缺口：

/* 带缺口的圆形样式 */
.notched-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #2563eb; /* 圆形主体颜色 */
  position: relative;
}

/* 实现缺口的伪元素 */
.notched-circle::after {
  content: "";
  position: absolute;
  bottom: 8px; /* 缺口距离圆形底部的距离 */
  left: 50%;
  transform: translateX(-50%);
  width: 42px; /* 缺口宽度 */
  height: 22px; /* 缺口高度 */
  background: #ffffff; /* 和页面背景色保持一致 */
  border-radius: 11px; /* 圆角值设为高度的一半，让缺口边角圆润 */
}

调整说明： #

• 修改主元素的width/height可以改变圆形大小
• 调整伪元素的bottom控制缺口的上下位置，width/height控制缺口的尺寸
• 如果缺口要放在顶部/左侧/右侧，只需要把bottom换成top/right/left，同时调整transform（比如顶部缺口保留transform: translateX(-50%)，左侧缺口换成transform: translateY(-50%)）

内容的提问来源于stack exchange，提问作者Abdullah Abbasi