{"id":26674,"date":"2022-12-19T08:47:57","date_gmt":"2022-12-19T03:17:57","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-make-a-small-node-like-circle-in-css\/"},"modified":"2022-12-19T08:47:57","modified_gmt":"2022-12-19T03:17:57","slug":"solved-how-to-make-a-small-node-like-circle-in-css","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-make-a-small-node-like-circle-in-css\/","title":{"rendered":"[Solved] How to make a small, node-like circle in CSS"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

I got you fam.<\/p>\n

1) Let’s create some CSS circles. Hella<\/em> easy with border-radius<\/code>.<\/p>\n

<div class=\"circle\"><\/div>\n\n.circle {\n    border: 5px solid black;\n    border-radius: 50%;\n    width: 100px;\n    height: 100px;\n}\n<\/code><\/pre>\n
Look at this gorgeous circle!<\/strong><\/p>\n
\"enter<\/a><\/p>\n
Now we need some child nodes. MOAR CIRCLES<\/em><\/strong>! Also, we should start thinking about positionin’ these circles. position: absolute<\/code>? Pssh<\/em>, You know it!<\/p>\n
<div class=\"circle\"><\/div>\n<div class=\"circle circle-small right-top\"><\/div>\n<div class=\"circle circle-small right-bottom\"><\/div>\n\n.circle {\n    border: 5px solid black;\n    border-radius: 50%;\n    position: absolute;\n    top: 100px;\n    bottom: 100px;\n    width: 100px;\n    height: 100px;\n}\n\n.circle-small {\n    border: 5px solid black;\n    border-radius: 50%;\n    width: 50px;\n    height: 50px;\n}\n\n.right-top {\n    top: 50px;\n    left: 250px;\n}\n.right-bottom {\n    top: 200px;\n    left: 250px;\n}\n<\/code><\/pre>\n
LOOK, We’re basically there!<\/strong><\/p>\n
\"enter<\/a><\/p>\n
So, the edges? How do we connect those?!? WELL, we’re tagged CSS<\/strong> and HTML<\/strong>, SO we’re gonna do it the painstakingly way: GENERATED CONTENT!<\/p>\n
Tangent: You can do some amazing stuff with a single div: https:\/\/a.singlediv.com\/<\/a><\/p>\n
I’m going ::before<\/code>, but ::after<\/code> totally works.<\/p>\n
.right-top::before {\n    border-top: 5px solid black;\n    content: '';\n    display: block;\n    height: 100px;\n    width: 65px;\n    position: absolute;\n    left: -36px;\n    top: 46px;\n    transform: rotate(-30deg);\n}\n<\/code><\/pre>\n
Let’s break these down line by line!<\/p>\n