Как сегментировать круг с разными цветами с помощью CSS

Я хочу, чтобы иметь возможность рисовать круг с его сегментом другого цвета, я хотел бы, чтобы количество охватываемого сегмента увеличивалось с шагом 10% от 0% до 100%.

Любые примеры в Google - это все сектора, а не сегменты.

Пока это лучшее, что я смог придумать:

div.outerClass {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 2.5px;
    overflow: hidden;
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

div.innerClass {
    width: 10px;
    height: 10px;
    border: 5px solid green;
    border-radius: 36px;
}

<div class="outerClass">
    <div class="innerClass"></div>
</div>

Ответы

Ответ 1

Кросс-браузерное решение:

JSFiddle

.circle {
    border-radius: 50%;
    background: gray;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.segment {
    float: left;
    width: 10%;
    height: 100%;
}
    .segment_1 {
        background: red;
    }
    .segment_2 {
        background: green;
    }
    .segment_3 {
        background: yellow;
    }
    .segment_4 {
        background: blue;
    }

<div class="circle">
    <div class="segment segment_1"></div>
    <div class="segment segment_2"></div>
    <div class="segment segment_3"></div>
    <div class="segment segment_4"></div>
</div>

Ответ 2

Вы можете сделать это, используя linear-gradient

.circle{
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  background: linear-gradient(
    to right,
    yellow  0%, yellow 10%,
    orange 10%, orange 20%,
    yellow 20%, yellow 30%,
    orange 30%, orange 40%,
    yellow 40%, yellow 50%,
    orange 50%, orange 60%,
    yellow 60%, yellow 70%,
    orange 70%, orange 80%,
    yellow 80%, yellow 90%,
    orange 90%, orange 100%
  );
}

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

Ответ 3

BOX SHADOW

Другим подходом может быть использование одного элемента и теней в коробке.

Основной элемент - это круг (border-radius: 50%;) и имеет соотношение сторон 1:1.
Псевдоэлемент расположен left: -100%; или только слева от основного элемента.
К псевдоэлементу применяются 10 теней теней с разным цветом и разными абсциссами. Я поставил абсцисс как 30px, так как 30px составляет 10% от 300px...
Было выбрано 10% ширины, потому что требуется 10 полосок.

div {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
div:before {
  position: absolute;
  content: '';
  height: inherit;
  width: inherit;
  left: -100%;
  background: red;
  box-shadow: 
    30px 0 0 chocolate,
    60px 0 0 hotpink,
    90px 0 0 indigo,
    120px 0 0 orangered,
    150px 0 0 gold,
    180px 0 0 deepskyblue,
    210px 0 0 springgreen,
    240px 0 0 darkslategray,
    270px 0 0 gold,
    300px 0 0 navy;
}

<div></div>

Ответ 4

Другим подходом будет использование SVG. Сегменты сделаны с элементами <rect />, и они обрезаются по кругу с помощью элемента <clipPath/>:

svg{width:40%;display:block;margin:0 auto;}
use:hover{fill:#000;}

<svg viewBox="0 0 10 10">
  <defs>
    <clipPath id="circle">
      <circle cx="5" cy="5" r="5" />
    </clipPath>
    <rect id="seg" y="0" width="1" height="10" />
  </defs>  
  <g clip-path="url(#circle)">
    <use xlink:href="#seg" x="0" fill="pink"/>
    <use xlink:href="#seg" x="1" fill="green" />
    <use xlink:href="#seg" x="2" fill="orange" />
    <use xlink:href="#seg" x="3" fill="teal" />
    <use xlink:href="#seg" x="4" fill="tomato"/>
    <use xlink:href="#seg" x="5" fill="gold"/>
    <use xlink:href="#seg" x="6" fill="darkorange" />
    <use xlink:href="#seg" x="7" fill="pink" />
    <use xlink:href="#seg" x="8" fill="red" />
    <use xlink:href="#seg" x="9" fill="yellow" />
  </g>
</svg>