Diese Frage hat hier bereits eine Antwort:

Ist es möglich, einen Kreis mit nur CSS mit vier Vierteln zu erstellen?

Ich komme nicht weiter als:

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  colour: red;
}

<div class="circle">&nbsp;</div>