创建由线连接到中间主圆的CSS圆 [英] Creating CSS circles connected by lines to middle main circle

问题描述

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

I need to create a page something like this. The blue circle is the main circle and green circles should place around the main circle. The green circles count is random (around 0 - 10). All green circles are connected to blue circle with a line.

我知道要在CSS中绘制圆圈。我需要知道，

I know to draw circle in CSS. I need to know,

1. 如何在蓝色圆圈周围放置绿色圆圈


2. 如何连接绿色圆圈到蓝色圆圈

可以使用CSS。

谢谢。

推荐答案

您将需要的是 position：relative; 容器，其中放置子元素 absolute

What you will need is a position: relative; container with child elements positioned absolute

演示

演示2 / a> （使用 transform ）

在父元素 .ball_wrap 上的<$ c> position：relative; ，而不是使用 position：absolute; / code>为子元素AS WELL作为：之后伪元素将子元素与父元素连接。如果你不知道伪元素，而不是把它们当作一个虚拟元素，这些元素并不存在于DOM中，而是以图形方式呈现。因此，使用 display：block; ，因为它们是 inline ：; ... Rest，使用顶部，右 底部和左属性。

Explanation: What am doing here is using position: relative; on the parent element which is .ball_wrap, than am using position: absolute; for the child elements AS WELL AS the :after pseudo elements to connect the child elements with the parent. If you are not aware of the pseudo elements than take them as a virtual element, these elements do not exist literally in the DOM but they do render graphically. So am using display: block; as they are inline by default..along with content: "";... Rest, set them accordingly using top, right, bottom and left properties.

.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查看这些类型的图表

这篇关于创建由线连接到中间主圆的CSS圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！