动态生成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>