Css 边界半径50%，使用伪元素的凹形边界

我想创建一个边界半径为50%的div，背景为蓝色，这样曲线的右侧部分应该用另一种颜色填充，比如浅蓝色。我们如何使用css伪元素来实现这一点

#circle{
  width: 50px;
  height: 50px;
  background: blue;
  border-radius: 50%;
}

---

您可以使用以下解决方案：

#圆圈{
宽度：50px；
高度：50px；
背景：蓝色；
边界半径：50%；
位置：相对位置；
}
#圆圈：之后{
内容：“；
显示：块；
位置：绝对位置；
左：50%；
排名：0；
身高：100%；
宽度：50%；
背景：浅蓝色；
z指数：-1；
}

您是否尝试解决此问题？只需绝对定位伪元素，并使其宽度减半…？