CSS: Circle with four colors and only one div

css

Solution

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/

Problem

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?

Original source