html - 创建由线连接到中间主圆的 CSS 圆

Question

我需要创建一个类似这样的页面。蓝色圆圈是主圆圈，绿色圆圈应该放在主圆圈周围。绿色圆圈计数是随机的(大约 0 - 10)。所有绿色圆圈都用一条线连接到蓝色圆圈。

我知道在 CSS 中画圆。我需要知道，

1. 如何在蓝色圆圈周围放置绿色圆圈
2. 如何将绿色圆圈连接到蓝色圆圈

是否可以使用 CSS。如果不是，那方法是什么？

谢谢。

Answer 1

您需要的是一个position: relative; 容器，其子元素定位在absolute

Demo

Demo 2 (使用转换)

说明:我在这里做的是在 .ball_wrap 父元素上使用 position: relative;，而不是使用 position: absolute; 为子元素以及 :after 伪元素连接子元素和父元素。如果您不了解伪元素而不是将它们视为虚拟元素，那么这些元素实际上并不存在于 DOM 中，但它们确实以图形方式呈现。所以我正在使用 display: block; 因为它们默认是 inline.. 连同 content: "";... 休息，设置它们相应地使用 top、right、bottom 和 left 属性。

.ball_wrap {
    position: relative;
    margin: 150px;
    width: 90px;
}

.green_ball {
    background: #00C762;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 3px solid #ccc;
    position: absolute;
}

.blue_ball {
    background: #2F9BC1;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 3px solid #ccc;
}

.ball_wrap div:nth-of-type(2) {
    top: 20px;
    left: -100px;
}

.ball_wrap div:nth-of-type(2):after {
    content: "";
    display: block;
    border-bottom: 1px solid #000;
    position: absolute;
    width: 50px;
    right: -50px;
    top: 50%;
}

.ball_wrap div:nth-of-type(3) {
    top: 20px;
    right: -100px;
}

.ball_wrap div:nth-of-type(3):after {
    content: "";
    display: block;
    border-bottom: 1px solid #000;
    position: absolute;
    width: 50px;
    left: -52px;
    top: 50%;
}

.ball_wrap div:nth-of-type(4) {
    right: 20px;
    bottom: -100px;
}

.ball_wrap div:nth-of-type(4):after {
    content: "";
    display: block;
    border-left: 1px solid #000;
    position: absolute;
    height: 50px;
    left: 50%;
    top: -52px;
}

---

您也可以看看 these types of charts使用 jQuery