CSS样式形状

如何解决CSS样式形状

我正在尝试创建以下图像：https://i.stack.imgur.com/7k4Uq.png

我不确定执行此操作的最佳方法是什么。我可以使用CSS，但是我不知道是否有“更好的方法”或更简便的方法。我的CSS如下：

 :root{
--size-red: 70px;
  --size-grey: 43px;
}
.arc {
  width: 0;
  height: 0;
  position: relative;
  border-left: var(--size-red) solid transparent;
  border-right: var(--size-red) solid transparent;
  border-top: 100px solid red;
  border-radius: 51%;
}
.arc:after {
  content:'';
    width: 0;
  height: 0;
  position: relative;
  right: var(--size-grey);
  border-left: var(--size-grey) solid transparent;
  border-right: var(--size-grey) solid transparent;
  border-top: 60px solid white;
  border-radius: 51%;
}

关于如何使我的代码看起来更简洁/更易于管理的任何建议将是有益的。谢谢！