CSS - 用较小的圆圈填充圆圈？
[英]CSS - Fill a Circle with Smaller Circles?
问题描述
This is a pure CSS solution.
这是一个纯 CSS 解决方案。
I have created a series of circles using pure CSS3, and am now trying to dynamically populate those areas with smaller circles, to create a pie chart-like appearance.我已经使用纯 CSS3 创建了一系列圆圈，现在我正在尝试用较小的圆圈动态填充这些区域，以创建类似饼图的外观。
Here is an example of what I am trying to accomplish:这是我要完成的一个示例：
Here is the relevant code for me making the large circles: https://jsfiddle.net/z6vt7r10/这是我制作大圆圈的相关代码： https://jsfiddle.net/z6vt7r10/
#circle {
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
display: block;
background-color: rgba(112, 48, 160);
}
<div id="circle"></div>
Here is my attempt to populate with smaller circles: https://jsfiddle.net/z6vt7r10/1/这是我尝试用较小的圆圈填充： https://jsfiddle.net/z6vt7r10/1/
.bubble {
position: relative;
height: 25px;
width: 25px;
border-radius: 50%;
display: block;
/*display: inline;
margin: 0; */ /*This doesn't work*/
background-color: black;
z-index: 99;
}
<div class="circle" id="circle2">
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
<span class="bubble"></span>
</div>
As you can see, it just spits out smaller circles but doesn't actually fill the div in the circle shape.如您所见，它只是吐出较小的圆圈，但实际上并没有填充圆形中的 div。
Any ideas on how I can accomplish this?关于我如何做到这一点的任何想法？ I have tried using the Highcharts library to create a pie chart and then using the pattern fill addon to fill it with a polka-dot pattern, but that's not what I am trying to create.我尝试使用 Highcharts 库创建饼图，然后使用图案填充插件用圆点图案填充它，但这不是我想要创建的。 I am open to using some other library like chartjs or doing it via html5 canvas, but a pure css solution would be great, too.我愿意使用其他一些库，如 chartjs 或通过 html5 canvas 进行操作，但纯 css 解决方案也会很棒。
1 个解决方案
解决方案1
1 2020-05-20 20:45:21
One approximation is to consider the use of shape-outside to contain the circles then a gradient as coloration.一种近似方法是考虑使用shape-outside来包含圆圈，然后使用渐变作为着色。
Here is an idea based on this previous answer这是基于此先前答案的想法
div.box { --s: 9em; /*Size of the circle */ text-align: center; height: var(--s); width: var(--s); border-radius: 50%; overflow: hidden; position: relative; }.box>div { height: 100%; }.box:before, .box>div:before { content: ''; float: left; height: 100%; width: 50%; shape-outside: radial-gradient(farthest-side at var(--d, right), transparent 99%, red 0); }.box>div:before { float: right; --d: left; } div.box { display: inline-block; vertical-align: middle; margin: 5px; font-size: 20px; }.box i { display: inline-block; vertical-align: top; border-radius: 50%; width: 1.12em; height: 1.12em; background: red; }.box::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: conic-gradient(from -90deg, transparent 0 70deg, #fff 71deg); mix-blend-mode: exclusion; }
<div class="box" style="--s:17em;--p:15px"> <div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> </div> <div class="box" style="--s:10em;"> <div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> </div>
To go further you can replace the gradient/mix-blend-mode coloration with a JS script that will select the cirle individually to correct them.对于 go 进一步，您可以使用 JS 脚本替换渐变/混合混合模式着色，该脚本将 select 单独纠正它们。
Here is a very basic example:这是一个非常基本的例子：
$('.box i').each(function() { var c = $(this).offset(); var p = $(this).parent().offset(); if((c.top - p.top) > ($(this).parent().height()/2) && (c.left - p.left)> ($(this).parent().width()/2)) { $(this).addClass('color') } });
div.box { --s: 9em; /*Size of the circle */ text-align: center; height: var(--s); width: var(--s); border-radius: 50%; overflow: hidden; position: relative; }.box>div { height: 100%; }.box:before, .box>div:before { content: ''; float: left; height: 100%; width: 50%; shape-outside: radial-gradient(farthest-side at var(--d, right), transparent 99%, red 0); }.box>div:before { float: right; --d: left; } div.box { display: inline-block; vertical-align: middle; margin: 5px; font-size: 20px; }.box i { display: inline-block; vertical-align: top; border-radius: 50%; width: 1.12em; height: 1.12em; background: red; }.box i.color { background:green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box" style="--s:17em;--p:15px"> <div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> </div> <div class="box" style="--s:10em;"> <div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> </div>
To make the circles a bit scrambled you can add some transformation like below:要使圆圈有点混乱，您可以添加一些转换，如下所示：
$('.box i').each(function() { var c = $(this).offset(); var p = $(this).parent().offset(); if((c.top - p.top) > ($(this).parent().height()/2) && (c.left - p.left)> ($(this).parent().width()/2)) { $(this).addClass('color') } });
div.box { --s: 9em; /*Size of the circle */ text-align: center; height: var(--s); width: var(--s); border-radius: 50%; overflow: hidden; position: relative; }.box>div { height: 100%; }.box:before, .box>div:before { content: ''; float: left; height: 100%; width: 50%; shape-outside: radial-gradient(farthest-side at var(--d, right), transparent 99%, red 0); }.box>div:before { float: right; --d: left; } div.box { display: inline-block; vertical-align: middle; margin: 5px; font-size: 20px; }.box i { display: inline-block; vertical-align: top; border-radius: 50%; width: 1.12em; height: 1.12em; background: red; }.box i.color { background:green; }.box i:nth-child(3n + 1) { transform:translate(2px,-1px); }.box i:nth-child(3n + 2) { transform:translate(-2px,1px); }.box i:nth-child(3n + 3) { transform:translate(-1px,-2px); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box" style="--s:17em;--p:15px"> <div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> </div> <div class="box" style="--s:10em;"> <div><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用 CSS 将圆圈链接到中间圆圈 - Link circles to the middle circle with CSS
在 CSS 中的滚动上填充一个圆圈 - Fill a circle on scroll in CSS
如何用css、javascript围绕一个圆圈创建圆圈？ - How to create circles around a circle with css, javascript?
如果单击圆圈，如何将圆圈与线条垂直连接起来，它应该用颜色填充 - how to connect circles with line vertically if clicked on circle it should fill with color
创建由线连接到一个主圆的CSS圆 - Creating CSS circles connected by lines to one main circle
如何使用css / bootstrap将圆圈放在圆圈中？ - How do I position circles in a circle with css/bootstrap?
创建由线连接到中间主圆的CSS圆 - Creating CSS circles connected by lines to middle main circle
在CSS中，如何在较大的圆圈内制作圆圈，并在所有圆圈的中心内制作文字？ - How do I make circles within a larger circle, and text within the center of all the circles, in CSS?
如何用 css 和 html 的图像填充圆圈？ - How to fill a circle with an image with css and html?
使用 css 添加带有复选标记的填充圆 - add fill circle with checkmark using css
相关标签