创建通过线连接到中间主圆的CSS圆

Question

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

我知道在CSS中绘制圆圈.我需要知道,

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

是否可以使用CSS.如果不是这样的话？

谢谢.

Answer 1

您需要的是一个position: relative;放置了子元素的容器absolute

Demo

Demo 2(使用transform)

说明:这里正在做的是使用position: relative;父元素,而.ball_wrap不是position: absolute;用于子元素的AS :after,以及将子元素与父元素连接起来的伪元素.如果你不知道伪元素而不是将它们作为虚拟元素,那么这些元素在字面上不存在于DOM中,但它们确实以图形方式呈现.所以我使用display: block;,因为它们是inline用default..along 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;
}

您也可以使用jQuery 查看这些类型的图表