Create a two color circle

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>