Перекрывающиеся круги в CSS с 1 div

Question

Перекрывающиеся круги в 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>

а затем просто нарисуйте пару четвертей Луны в нем, и все готово. Однако я не могу понять, как нарисовать эти формы Луны в моей капсуле в форме div.

724 3

html css css3 svg css-shapes

3 ответов:

Comments

Ничего не найдено.

web-tiki · Accepted Answer · 2016-01-10 14:49:25

С 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>
выход :

поддержка браузера для box-shadows - это IE9+ (для получения дополнительной информации см. canIuse)

вы также можете сделать форму перекрывающихся кругов отзывчивый по на ширину видового экрана с помощью vw units:демо
#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

другой подход будет использовать inline svg С <circle> элемент.
Это реагирует в зависимости от размера родителя и поддержка браузера возвращается к IE9 как коробка-тени :
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, чтобы сделать анимированный "червь" с большим количеством перекрывающихся кругов. Вы можете увидеть это в этой ручке:анимированные червь

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

Salman A · Accepted Answer · 2015-07-07 08:05:43

можно использовать 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>

VerticalGrain · Accepted Answer · 2014-12-07 07:14:39

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