Creating CSS circles connected by lines to middle main circle

Question

I need to create a page something like this. The

Answer 1

You can create the round shapes just with plain CSS:

html:

css:

.border
{
    position: relative;
    width: 115px;
    height: 115px;
    background: #e7e9e9;
    border-radius: 100px;
    border: 2px solid #d1d1d1;
}

.ball
{
    position: absolute;
    left: 9%;    
    top: 9%;

    width: 90px;
    height: 90px;

    border-radius: 100px;
}

.blue
{
    background: #2f9bc1;
    border: 2px solid #266a8e;
}

.green
{
   background: #00c762; 
   border: 2px solid #00be58;
}

#ball
{
    top: 200px;   
    left: 300px;
}

Where you place each shape at the right position with position: relative; offset.

For the lines you could use HTML 5 canvas:

html:

javascript canvas:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(350, 150);
context.lineTo(50, 50);
context.stroke();

Where i use a position: absolute; for the line, so it doesn't push the shapes away and a z-index so it is beneath the shapes:

.line
{
    position: absolute;
    width: 320px;
    z-index: -1;
}

jsFiddle