CSS: Circle with four colors and only one div

Question

Is it possible to create a circle with four different colors (one for each quarter) using pure CSS? I want something like one of these four circles:

[Unfortunately the image I linked to does not exist anymore. Please see the answers to understand the what effect I was after]

I can imagine using a solution with four divs and border-radius, but is this possible using only one div and some fancy css3?

Answer 1

Since you listed CSS3, you could do this with just borders and a rotation transformation to "fix" the alignment:

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

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

http://jsfiddle.net/k8Jj9/

Answer 2

The CSS would be:

div {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
    background-size: 50% 50%;
    background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
    background-repeat: no-repeat;
}

demo

And with the border radius:

demo 2

Alternate method

.quarters {
    width: 101px;
    height: 101px;
    border-radius: 50%;
    position: relative;
}

.quarters:after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),                   
                linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
    background-size: 50% 100%, 100% 50%;
    background-position: 100% 0%, 0% 100%;
    background-repeat: no-repeat;
  
}

#red {
    background-color: red;
}
#blue {
    background-color: blue;
}
#green {
    background-color: green;
}
#yellow {
    background-color: yellow;
}

In the line of the OP images, where the circles have different shades of the same color, there is the posibility to define a class that sets to overlays over the base div, both of them semitransparents. Once defined that class, you can easily apply it to different color elements, getting the same effect without effort

Demo 3

Answer 3

How about this:

http://jsbin.com/uletik/1/edit

Just one div.

div {
  height:100px;
  width:100px;
  border-radius:100px;
 background: -webkit-linear-gradient(left, grey, grey 50%, blue 50%, blue);
  overflow:hidden;
  position:relative;
}
div:after {
  content:"";
  height:50px;
  background-color:red;
  width:50px;
  display:block;
}
div:before {
  content:"";
  background-color:green;
  height:50px;
  width:50px;
  display:block;
  right:0;
  position:absolute;
}