CODEWITHSUNDEEP
htmlcss
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

Create a two color circle

I'm trying to create two half circles (each with a different color) which together form one circle. Something like this

enter image description here

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 :) ?

Upvotes: 3

Views: 8389

Answers (3)

Takit Isy
Takit Isy

Reputation: 10081

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.

Upvotes: 6

Temani Afif
Temani Afif

Reputation: 272901

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>

Upvotes: 3

Ali
Ali

Reputation: 1336

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/

Upvotes: 2

Related Questions