CSS 中的圆圆相交

Question

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

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

Answer 1

据我了解，你想要这样的东西。 JS小提琴

<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;

}