CSS中的圆 - 圆交点

Question

我需要在HTML中创建一个圆圈，并在此圆圈上创建另一个圆圈的一部分。这是一个例子：

我需要做绿色和黄色区域。没有红色区域。请告诉我，我该怎么做。我可以用border-radius属性做绿色区域，用clip-path属性做黄色区域还是有更好的方法？

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;

}