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>