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

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

Desired overlapping cicles shape

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

http://jsfiddle.net/5wytm0r4/

 #circles {
   background-color: red;
   width: 130px;
   height: 100px;
   border-radius: 50px;
 }
<div id="circles"></div>

А потом просто нарисуйте пару четверти луны, и все готово. Тем не менее, я не могу понять, как нарисовать эти формы луны в моей форме капсулы.

+58
источник поделиться
3 ответа

С 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>

вывод:

CSS orvelapping circles

Поддержка браузеров для ящиков-теней - IE9 + (подробнее см. canIuse)


Вы также можете сделать перекрывающиеся круги отзывчивыми в соответствии с шириной окна просмотра с vw units: DEMO

#circles {
  background-color: red;
  width: 20vw;
  height: 20vw;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 2vw 0 0 -0.4vw #f8ff00, 
              4vw 0 0 -0.8vw #009901, 
              6vw 0 0 -1.2vw #3531ff;
}
<div id="circles"></div>

Поддержка браузера для блоков vw - IE9 + (подробнее см. canIuse)


С SVG

Другим подходом было бы использовать встроенный svg с элементом <circle>.
Это зависит от размера родителя и поддержка браузера возвращается к IE9, например box-shadows:

svg{width:80%;}
<svg viewbox="0 0 100 30">  
  <circle cx="59" cy="15" r="8.5" fill="darkorange" />
  <circle cx="56" cy="15" r="9" fill="gold" />
  <circle cx="53" cy="15" r="9.5" fill="tomato" />
  <circle cx="50" cy="15" r="10" fill="teal" />
</svg>

Я также расширил версию SVG, чтобы создать анимированный "червь" с более перекрывающимися кругами. Вы можете увидеть это в этом ручке: анимированный червь

И это выглядит так:

Animated worm made of overlapping circles

+105
источник

Можно использовать 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>
+10
источник

Или, если вы чувствуете себя сумасшедшим, вы можете создать 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>
+5
источник

Посмотрите другие вопросы по меткам или Задайте вопрос