CSS：填充2,3或4种颜色的圆圈

Question

是否可以用2或3种颜色填充圆圈，以便每个部分具有相等的面积？

我知道你可以做4：http://jsfiddle.net/k8Jj9/

div {
border-radius: 50px;
border-right-color: blue;
border-top-color: yellow;
border-bottom-color: red;
border-left-color: green;
border-width: 50px;
border-style: solid;
height: 0px;
width: 0px;

/* To ratate */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

}

但我很好奇如果有一种方法可以做2,3和4（希望在单一方法/或一组编码中）。

编辑：这些圈子将由D3绘制，所以我不确定这是否会改变答案/建议，特别是关于SVG。

Answer 1

要制作一个有三种颜色的圆圈，请从你的小提琴开始，然后在其上再加两个圆圈，旋转方向不同。可以使用div的:: before和:: after伪元素制作另外两个圆圈。

string.Join(",", from SqlParameter p in cmd.Parameters select p.ToString()) 

div {
  border-radius: 50px;
  border-right-color: red;
  border-top-color: yellow;
  border-bottom-color: red;
  border-left-color: green;
  border-width: 50px;
  border-style: solid;
  height: 0px;
  width: 0px;
  position: relative;
  /* To ratate */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

div::before {
  display: block;
  content: '';
  position: absolute;
  left: -50px;
  top: -50px;
  border-radius: 50px;
  border-right-color: transparent;
  border-top-color: yellow;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-width: 50px;
  border-style: solid;
  height: 0px;
  width: 0px;
  /* To ratate */
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

div::after {
  display: block;
  content: '';
  position: absolute;
  left: -50px;
  top: -50px;
  border-radius: 50px;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: green;
  border-width: 50px;
  border-style: solid;
  height: 0px;
  width: 0px;
  /* To ratate */
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}