CSS: кружок с четырьмя цветами и только один div

Можно ли создать круг с четырьмя разными цветами (по одному за каждую четверть) с использованием чистого CSS? Я хочу что-то вроде одного из этих четырех кругов:

[К сожалению, образ, с которым я связан, больше не существует. Пожалуйста, ознакомьтесь с ответами, чтобы понять, какой эффект я получил после]

Я могу представить, используя решение с четырьмя divs и border-radius, но возможно ли это использование только одного div и некоторого fancy css3?

Ответ 1

Поскольку вы указали CSS3, вы можете сделать это с помощью только границ и поворота, чтобы "исправить" выравнивание:

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/

Ответ 2

CSS:

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;
}

демо

И с радиусом границы:

демо 2

Альтернативный метод

.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;
}

В строке изображений OP, где круги имеют разные оттенки одного цвета, существует возможность определить класс, который устанавливает наложения над базовым div, причем оба из них являются полупрозрачными. После определения этого класса вы можете легко применить его к различным цветовым элементам, получив тот же эффект без усилий.

Демо 3

Ответ 3

Как насчет этого:

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

Только один 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;
}