[英]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 html 使用CSS和html
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>
The sigma.js framework might be better suited than a pure css option sigma.js框架可能比纯CSS选项更适合
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.