Создайте двухцветный круг

Question

Я пытаюсь создать два полукруга (каждый разного цвета), которые вместе образуют один круг.Примерно так

DEMO

Я создал это, используя 2 элемента и немного CSS:

<span class="circle-part half-left-circle"></span>
<span class="circle-part half-right-circle"></span>

и

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

Хотя это именно то, что мне нужно, мне было интересно, можно ли это сделать только с одним элементом HTML (конечно, без псевдоэлементов :)?

Answer 1

Пожалуйста, попробуйте этот код

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>

Скрипка: http://jsfiddle.net/66r7nj4x/

Answer 2

Вот более простое решение с двумя градиентами и меньшим количеством кода:

.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

Вот рабочий фрагмент того, что я сделаю, используя значения border:

• % вместо px для border-radius, это сильно упрощает!
• border-color, чтобы добавить правильный цвет для каждой стороны.
• transform: rotate(45deg);, чтобы повернуть, как вы хотите.

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">

⋅ ⋅ ⋅

Мы также можем использовать некоторые CSS-переменные, если вы хотите создать много из них:

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>

Надеюсь, это поможет.