Create a two color circle - html

Question

I'm trying to create two half circles (each with a different color) which together form one circle. Something like this
DEMO
I created this using 2 elements and a bit of css:
<span class="circle-part half-left-circle"></span>
<span class="circle-part half-right-circle"></span>
and
$size: 100px;
$border: 20px;
...
.half-right-circle {
border-top-right-radius: $size + $border;
border-bottom-right-radius: $size + $border;
border: $border solid green;
border-left: 0;
}
.half-left-circle {
border-top-left-radius: $size + $border;
border-bottom-left-radius: $size + $border;
border: $border solid red;
border-right: 0;
}
Although this is exactly what I need, I was wondering if this can be achieved with just one html element (without pseudo elements of course :) ?

Answer 1

Here is a working snippet of what I'll do, using border:
% values instead of px for border-radius, it simplifies a lot!
border-color to add the correct color for each side.
transform: rotate(45deg); to turn it like you want.
body{
background: #ccc;
}
.halves-circle{
background: #fff;
height: 200px;
width: 200px;
border: 20px solid;
border-radius: 50%;
border-color: green green red red;
transform: rotate(45deg);
}
<div class="halves-circle">
⋅
⋅
⋅
We could use some CSS variables too, if you want to make many of them:
body{
background: #ccc;
}
.halves-circle{
background: #fff;
height: var(--size);
width: var(--size);
border: var(--border) solid;
border-radius: 50%;
border-color: green green red red;
transform: rotate(45deg);
}
#hc1{
--size: 100px;
--border: 20px;
}
#hc2{
--size: 60px;
--border: 30px;
}
#dot{ /* We can even do this! */
--size: 0px;
--border: 20px;
}
<div class="halves-circle" id="hc1"></div>
<div class="halves-circle" id="hc2"></div>
<div class="halves-circle" id="dot"></div>
Hope it helps.

Answer 2

Here is a more simple solution with only 2 gradient and less of code:
.circle {
margin:20px;
border-radius:50%;
width:200px;
height:200px;
background:
radial-gradient(circle at center,white 60%,transparent 60.5%),
linear-gradient(to right,red 50%,green 0);
}
body {
background-color:pink;
}
<div class="circle">
</div>

Answer 3

Please try this code
body {
background: #ccc;
}
.circle {
margin: 25px 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 12px solid transparent;
background-size: 100% 100%, 100% 50%,100% 100%, 100% 50%;
background-repeat: no-repeat;
background-image: linear-gradient(white, white),
linear-gradient(360deg, green 100%, lightgrey 100%),
linear-gradient(360deg, red 100%, lightgrey 100%);
background-position: center center, left top, right top, left bottom, right bottom;
background-origin: content-box, border-box, border-box, border-box, border-box;
background-clip: content-box, border-box, border-box, border-box, border-box;
transform: rotate(90deg);
}
<div class="circle">
</div>
Fiddle: http://jsfiddle.net/66r7nj4x/