[Solved] How to make a small, node-like circle in CSS

Question

I got you fam.

1) Let’s create some CSS circles. Hella easy with border-radius.

<div class="circle"></div>

.circle {
    border: 5px solid black;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Look at this gorgeous circle!

Now we need some child nodes. MOAR CIRCLES! Also, we should start thinking about positionin’ these circles. position: absolute? Pssh, You know it!

<div class="circle"></div>
<div class="circle circle-small right-top"></div>
<div class="circle circle-small right-bottom"></div>

.circle {
    border: 5px solid black;
    border-radius: 50%;
    position: absolute;
    top: 100px;
    bottom: 100px;
    width: 100px;
    height: 100px;
}

.circle-small {
    border: 5px solid black;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.right-top {
    top: 50px;
    left: 250px;
}
.right-bottom {
    top: 200px;
    left: 250px;
}

LOOK, We’re basically there!

So, the edges? How do we connect those?!? WELL, we’re tagged CSS and HTML, SO we’re gonna do it the painstakingly way: GENERATED CONTENT!

Tangent: You can do some amazing stuff with a single div: https://a.singlediv.com/

I’m going ::before, but ::after totally works.

.right-top::before {
    border-top: 5px solid black;
    content: '';
    display: block;
    height: 100px;
    width: 65px;
    position: absolute;
    left: -36px;
    top: 46px;
    transform: rotate(-30deg);
}

Let’s break these down line by line!

border-top: 5px solid black; – Our circle has a 5px border. I like turtles, err – consistency.
content: ''; – Dur.
display: block; – Cause, we wanna position it later!
height: 100px; – One of four values I tweaked around with ’til it looked good (thanks Chrome Dev Tools!)
width: 65px; – ^^^ ditto
position: absolute; – Yup
left: -36px; – So our border-top is connected to the circles
top: 46px; – Same as left
transform: rotate(-30deg); – etc etc

DRUMROLL

OH DANG! NEXT PLS:

.right-bottom::before {
    content: '';
    display: block;
    border-top: 5px solid black;
    width: 65px;
    height: 100px;
    position: absolute;
    left: -86px;
    transform: rotate(30deg);
    top: -14px;
}

It’s basically the same as right-top::before, except we tweaked the offsets left/top/transform to get….this:

BOOYA!

Anyway, I would go with SVG. Or, <canvas>.

Good luck.

OH, here’s the fiddle where screenshots came from.

Accepted Answer