How to segment a circle with different colors using CSS

Question

I want to be able to draw a circle with a segment of it another colour, I would like the amount of a segment covered to be able to be increased in increments of 10% from 0% to 100%.

Any examples on Google are all sectors not segments.

So far this is the best I have been able to come up with:

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>

0%, 50% and 100% I can all do.

Answer 1

You can do it using 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>

otherwise you can put 10 child elements inside your overflow:hidden circle parent:

.circle{    position:absolute;    width:80px;    height:80px;    border-radius:50%;    overflow:hidden;  }  .circle > span{    width:10%;    height:100%;    float:left;  }    .circle > span:nth-child(1){ background: yellow;}  .circle > span:nth-child(2){ background: orange;}  .circle > span:nth-child(3){ background: blue;}  .circle > span:nth-child(4){ background: green;}  .circle > span:nth-child(5){ background: fuchsia;}  .circle > span:nth-child(6){ background: orange;}  .circle > span:nth-child(7){ background: gold;}  .circle > span:nth-child(8){ background: tan;}  .circle > span:nth-child(9){ background: navy;}  .circle > span:nth-child(10){background: brown;}

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

Answer 2

The cross-browser solution:

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>