Перекрытие кругов в CSS с 1 div

Я хочу создать эту фигуру с перекрывающимися кругами в CSS:

В принципе, просто сложены круги. Я осмотрелся, и все решения, которые я вижу, включают использование нескольких элементов div для этого эффекта. Однако нельзя ли это сделать с помощью одного div, используя CSS3? Я посмотрел, как это легко сделать, и подумал, что если все цвета будут одинаковыми, у вас будет такая форма таблеток:

http://jsfiddle.net/5wytm0r4/

 #circles {
   background-color: red;
   width: 130px;
   height: 100px;
   border-radius: 50px;
 }

<div id="circles"></div>

Ответы

Ответ 1

С CSS box-shadows

Вы можете использовать несколько box-shadows с несколькими цветами на закругленном div. Они должны быть разделены запятой:

#circles {
  background-color: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 10px 0 0 -2px #f8ff00,
              20px 0 0 -4px #009901,
              30px 0 0 -6px #3531ff;
}

<div id="circles"></div>

Ответ 2

Можно использовать CSS3 несколько фоновых изображений и радиальный градиенты вместе:

#circles {
  width: 115px;
  height: 100px;
  background-image:
    radial-gradient(circle at 50px 50px, #F00 0, #F00 50px, transparent 50px),
    radial-gradient(circle at 55px 50px, #FF0 0, #FF0 50px, transparent 50px),
    radial-gradient(circle at 60px 50px, #080 0, #080 50px, transparent 50px),
    radial-gradient(circle at 65px 50px, #00F 0, #00F 50px, transparent 50px);
}

<div id="circles"></div>

Ответ 3

Или, если вы чувствуете себя сумасшедшим, вы можете создать svg и использовать его в качестве фонового изображения:

#circles {
  width: 120px;
  height: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle fill='blue'  cy='50' cx='70' r='50' /><circle fill='green'  cy='50' cx='65' r='50' /><circle fill='yellow'  cy='50' cx='60' r='50' /><circle fill='red'  cy='50' cx='55' r='50' /></svg>");
}

<div id="circles"></div>