Creating CSS circles connected by lines to middle main circle

css, css-position, html

Solution

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

Demo

Demo 2 (Using `transform`)

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

Also you might take a look at these types of charts using jQuery

Problem

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. I know to draw circle in CSS. I need to know, - How to place green circles around the blue circle - How to connect green circles to the blue circle Is it possible to do with CSS. If not what is the way? Thank you.

Original source