CSS:半个颜色的圆圈和另一个颜色的另一半？

Question

用CSS做这样的事情有可能吗？基本上一半的圆圈和另一半的颜色？

Answer 1

A linear-gradient会这样做,并用border-radius它来做一个圆圈.

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

<div></div>

Answer 2

你可以这样做：

div {
    border-radius: 50px;
    border-right-color: red;
    border-top-color: blue;
    border-bottom-color: red;
    border-left-color: blue;
    border-width: 50px;
    border-style: solid;
    height: 0px;
    width: 0px;
    }

<div>
</div>