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

我需要创建一个这样的页面。蓝色圆圈是主圆圈，绿色圆圈应该放在主圆圈周围。绿色圆圈的计数是随机的（大约0-10）。所有绿色圆圈都用一条线连接到蓝色圆圈。
我知道用CSS画圆圈。我要知道，
如何在蓝色圆圈周围放置绿色圆圈
如何将绿色圆圈连接到蓝色圆圈
有没有可能用CSS。如果不是，怎么走？
谢谢您。

最佳答案

您需要一个position: relative;容器，其中子元素位于absolute
Demo
Demo 2（使用transform）
说明：这里所做的是对父元素使用position: relative;，而不是对子元素使用.ball_wrap，以及对伪元素使用position: absolute;来连接子元素和父元素。如果你不知道伪元素，而不是把它们当作虚拟元素，这些元素就不存在于DOM中，但它们确实以图形方式呈现。所以我使用默认的:after和display: block;。。。Rest，使用inline、content: "";、top和right属性相应地设置它们。

.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;
}

您还可以使用jQuery查看these types of charts