CODEWITHSUNDEEP
javascripthtmlcss
mcbalaji
mcbalaji

Reputation: 183

How to draw connected circles with lines in CSS and HTML

I want to connected circles with other circles using lines as connector, each circle should holds hyper link text. using CSS and htmlenter image description here

Upvotes: 3

Views: 2855

Answers (2)

sharoz
sharoz

Reputation: 6345

The sigma.js framework might be better suited than a pure css option

http://sigmajs.org/

Upvotes: 1

Iaroslav Karandashev
Iaroslav Karandashev

Reputation: 574

As an idea to start I can propose you the following concept:

<style>
a {
    border: 1px solid black;
    border-radius: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    background: white;
}

#elementG {
    position: absolute;
    left: 150px;
    top: 100px;
}

#elementH {
    position: absolute;
    left: 70px;
    top: 150px;
}

#elementA {
    position: absolute;
    left: 20px;
    top: 80px;
}

b {
    border-bottom: 1px solid black;
    width: 70px;
    display: block;
    position: absolute;
}

#linkGA {
    -moz-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
    left: 30px;
    top: 125px
}

#linkAH {
        -moz-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    left: 87px;
    top: 135px
}
</style>

<b id="linkGA"></b>
<b id="linkAH"></b>
<a href="#" id="elementG">G</a>
<a href="#" id="elementA">A</a>
<a href="#" id="elementH">H</a>

Upvotes: 2

Related Questions