CSS样式形状

我正在尝试创建此图像：

我不知道最好的方法是什么。我让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%;
}

---

任何关于如何使我的代码看起来更干净/更易于管理的建议都将不胜感激。谢谢

我投票关闭这个，因为它是基于意见的，OPs代码已经运行。这可能会帮助列出的链接完美地回答我的问题，谢谢！