如何使用CSS和HTML绘制带有连线的圆形？

Question

我想用线连接圆形，每个圆形都应该包含超链接文本。使用CSS和HTML。

- mcbalaji

---

你目前有什么进展？ - user2968831

我什么都没有，我是新手。 - mcbalaji

我认为在你尝试这个之前，你可能需要理解一些基础知识。 - Mild Fuzz

既然您已经有了绘图，请使用此图作为“background-image”。否则，答案可能是“no”，“svg”，或者由于您的标签中包含Javascript，“canvas”。 - Mr Lister

Answer 1

作为一个开端的想法，我可以向您提出以下概念：

<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>

- Iaroslav Karandashev

---

我认为这很糟糕，但是当然，在我的评论之后，我不得不点赞。 - Mr Lister

这只是一个“概念验证”，在生产中没有这样疯狂的技巧的位置。 - Iaroslav Karandashev

Answer 2

相对于纯CSS的选项，sigma.js框架可能更加适合。

http://sigmajs.org/

- sharoz