title: CSS: Fill Circle with 2, 3 or 4 colors
body: <p>Is it possible to fill a circle with 2 or 3 colors so that each section has equal area?</p>
  
  <p>I know you can do 4: <a href="http://jsfiddle.net/k8Jj9/" rel="nofollow noreferrer">http://jsfiddle.net/k8Jj9/</a></p>
  
  <pre><code>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);
  </code></pre>
  
  <p>}</p>
  
  <p>But I'm curious how if there's an approach that can do 2, 3 and 4 (hopefully within a single approach / or set of coding).</p>
  
  <p>Edit: These circles will be drawn by D3, so I'm not sure if that changes the answers/suggestions, especially regarding SVG.</p>