在CSS中与1 div重叠的圆圈 [英] Overlapping circles in CSS with 1 div
问题描述
我想在CSS中创建这种重叠的圆形形状:
基本上,只是堆叠的圆。我已经看过,我看到的所有解决方案包括使用多个div元素的效果。然而,不能这样做与单个div,使用CSS3?我看了看它是如何容易做,并认为,如果所有的颜色是一样的,你会有一个药丸形状像这样:
)
您也可以使用
I'm looking to create this overlapping circles shape in CSS:
Basically, just stacked circles. I've looked around, and all solutions I see include using multiple div elements for this effect. However, can't this be done with a single div, using CSS3? I looked at how it could be easily done, and figured that, if all colours are the same, you'd have a pill shape like this:
#circles {
background-color: red;
width: 130px;
height: 100px;
border-radius: 50px;
}
<div id="circles"></div>
And then simply draw a couple of quarter moons in it, and you're done. However, I can't figure out how to draw these moon shapes in my capsule shaped div.
With CSS box-shadows
You can use multiple box-shadows with several colours on a rounded div. They need to be seperated by a comma:
#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>
output :
Browser support for box-shadows is IE9+ (for more info see canIuse)
You can also make the overlapping circles shape responsive according to the width of the viewport with 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>
Browser support for vw units is IE9+ (for more info see canIuse)
With SVG
Another approach would be to use an inline svg with the <circle>
element.
This is responsive according to the size of the parent and browser support goes back to IE9 like 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>
I also expanded on the SVG version to make an animated "worm" with more overlapping circles. You can see it in this pen : animated worm
And it looks like this :
这篇关于在CSS中与1 div重叠的圆圈的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!