CSS - 用較小的圓圈填充圓圈？

Question

這是一個純 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 解決方案也會很棒。

Answer 1

一種近似方法是考慮使用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>