[英]CSS - Fill a Circle with Smaller Circles?
这是一个纯 CSS 解决方案。
我已经使用纯 CSS3 创建了一系列圆圈,现在我正在尝试用较小的圆圈动态填充这些区域,以创建类似饼图的外观。
这是我制作大圆圈的相关代码: 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>
这是我尝试用较小的圆圈填充: 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>
如您所见,它只是吐出较小的圆圈,但实际上并没有填充圆形中的 div。
关于我如何做到这一点的任何想法? 我尝试使用 Highcharts 库创建饼图,然后使用图案填充插件用圆点图案填充它,但这不是我想要创建的。 我愿意使用其他一些库,如 chartjs 或通过 html5 canvas 进行操作,但纯 css 解决方案也会很棒。
一种近似方法是考虑使用shape-outside
来包含圆圈,然后使用渐变作为着色。
这是基于此先前答案的想法
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>
对于 go 进一步,您可以使用 JS 脚本替换渐变/混合混合模式着色,该脚本将 select 单独纠正它们。
这是一个非常基本的例子:
$('.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>
要使圆圈有点混乱,您可以添加一些转换,如下所示:
$('.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.