動態生成Html圖形

Question

我想弄清楚動態生成此圖形的最佳方法。這可以是1 - > n個與信息連接到基線的圓圈。

請讓我知道你是如何做到這一點或熟悉可能的方法。

這是基本佈局的圖像。

這裏是客戶端報告樣本的圖像。

Answer 1

這裏是你的形狀基本CSS。您應該能夠輕鬆地擴展該圖案以旋轉底部圖案的形狀。在使用css之前和之後有助於保持標記清潔。

.fizz { 
 
    height: 50px; 
 
    width: 50px; 
 
    background:#ddd; 
 
    border-radius:50%; 
 
    position:relative; 
 
    float: left; 
 
    margin-right:20px; 
 
} 
 
.fizz:before { 
 
    content:""; 
 
    height: 50px; 
 
    top: 49px; 
 
    left: 23px; 
 
    position:absolute; 
 
    border-left: 4px solid #ddd; 
 
} 
 
.fizz:after { 
 
    content:""; 
 
    height: 10px; 
 
    width: 10px; 
 
    top: 97px; 
 
    left: 16px; 
 
    position:absolute; 
 
    border: 4px solid #ddd; 
 
    border-radius: 50%; 
 
}

<div class="fizz"></div> 
 
<div class="fizz"></div> 
 
<div class="fizz"></div> 
 
<div class="fizz"></div>