CSS中的圆圈交点

Question

我需要在HTML中做一个圆和位于此圆上的另一个圆的一部分。这里是一个例子：

我需要做绿色和黄色区域。没有红色区域。请告诉我，我该怎么做。我可以用边界半径属性和带有剪辑路径属性的黄色区域来做绿色区域，还是有更好的方法？

Answer 1

据我了解，你需要这样的东西。 Js fiddle

<div class="circle circle-green"> 
    <div class="circle circle-red"></div> 
</div> 

.circle{ 
    width:250px; 
    height:250px; 
    border-radius:50%; 
} 
.circle-green{ 
    background:green; 
    overflow:hidden; 
    position:relative; 
} 
.circle-red{ 
    background:red; 
    right:-60%; 
    position:absolute; 

}