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

你可以做這樣的事情：

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>

Answer 3

您可以使用:before和:after爲圓形的每半僞元素，並父元素添加transform: rotate()。

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

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