CODEWITHSUNDEEP
css
homersheineken
homersheineken

Reputation: 333

CSS: Fill Circle with 2, 3 or 4 colors

Is it possible to fill a circle with 2 or 3 colors so that each section has equal area?

I know you can do 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);

}

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).

Edit: These circles will be drawn by D3, so I'm not sure if that changes the answers/suggestions, especially regarding SVG.

Upvotes: 6

Views: 3855

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

To make a circle with three colors, start with the fiddle you have and superimpose two more circles onto it, with different rotations. The two more circles can be made using the div's ::before and ::after pseudo elements.

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);
}
<div></div>

Upvotes: 6

Related Questions