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

Question

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

Answer 1

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

您可以这样做：

＆＃13;

＆＃13;

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;
    }

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以为圈子的每一半使用:before和:after个伪元素，并在父元素上添加transform: rotate()。

＆＃13;

＆＃13;

.circle {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(25deg);
}
.circle:after, .circle:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 50%;
}
.circle:after {
  background: #02FBFD;
  left: -2px;
}
.circle:before {
  background: #FE0103;
  right: -2px;
}

＆＃13;

<div class="circle"></div>

＆＃13;

＆＃13;

＆＃13;