CSS-制作半圆和四分之一圆

Question

我需要画一个看起来像图像的圆圈：

我目前的绕圈方式：

.circle {
  text-align: center;
  width: 16px;
  height: 16px;
  background-color: red;
  border-radius: 100px;
  margin-top: 6px;
}

我不确定如何用两种不同的颜色制作半圆和四分之一圆。请帮忙。谢谢。