CSS: Circle with half one color and the other half another color?

css

Solution

A `linear-gradient` will do that, and use `border-radius` to make it a circle.

div {
  width: 50vw;
  height: 50vw;
  background: linear-gradient( -45deg, blue, blue 49%, white 49%, white 51%, red 51% ); 
  border-radius: 50%;
}

<div></div>

Problem

Is it possible to do something like this with CSS? Basically make half the circle one color and the other half another color?

Original source