如何使用CSS对同心圆之间的区域进行着色

我有同心圆（圆圈内）和&我必须用两种不同颜色的两个圆圈之间的颜色区域。其中一半应该有不同的颜色。



我尝试过：



。外圈最小{



背景色：＃75a3a3;

宽度：70px; / *你也可以用％来定义* /

身高：70px; / *你可以用％来定义它* /

position：relative;

text-align：center;

border-radius：50％;

background-clip：content-box;

padding：5px;

box-shadow：插入10px 24px 40px 0px＃75a3a3，

插入-10px -24px 40px 0px＃75a3a3，

插入20px -10px 40px 0px＃75a3a3，

inset -20px 10px 40px 0px＃75a3a3;

}

.inner-1 {

background-color：＃f2f2f2;

top：10％;左：10％; / *容器* /

宽度：80％; / *外部1 * /

身高：80％; / * of outer-1 * /

的位置：绝对;

border-radius：50％;

text-align：center;

border：1px solid＃f2f2f2

}

i have concentric circle (circle within circle) & i have to color area between two circle with two diffrent colors. Half of it should have a diffrent color.

What I have tried:

.outer-circle-smallest {

background-color: #75a3a3;
width:70px; /* You can define it by % also */
height:70px; /* You can define it by % also*/
position:relative;
text-align:center;
border-radius: 50%;
background-clip:content-box;
padding:5px;
box-shadow: inset 10px 24px 40px 0px #75a3a3,
inset -10px -24px 40px 0px #75a3a3,
inset 20px -10px 40px 0px #75a3a3,
inset -20px 10px 40px 0px #75a3a3;
}
.inner-1 {
background-color:#f2f2f2;
top: 10%; left:10%; /* of the container */
width:80%; /* of the outer-1 */
height:80%; /* of the outer-1 */
position: absolute;
border-radius: 50%;
text-align:center;
border:1px solid #f2f2f2
}