如何使用CSS创建3段式甜甜圈/戒指？

这是一个具有一些复杂背景层且没有透明度的想法：

我将首先创建没有箭头的主要形状，如下所示：

.box {
  width:200px;
  height:200px;
  border-radius:50%;
  padding:50px;
  background:
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(-35deg,green 59%, transparent 60%) bottom left/50% 50%,
    linear-gradient( 35deg,green 59%, transparent 60%) bottom right/50% 50%,
    linear-gradient(to right,red 50%,blue 0);
  background-repeat:no-repeat;
  box-sizing:border-box;
}