绘制曲线以连接网页上的元素

Question

我的任务是将这个粗略的想法变成一个实时页面。

虽然我已经建立了一个基本结构，但我想知道创建连接月份的曲线的最佳方法。

我应该只创建图像并覆盖它们吗？有没有办法用某种脚本/编码来绘制它们？帆布？

我不知道这样做的最佳方法。

Answer 1

我只是把这些放在一起是为了向你展示这是很有可能的，而且可能还有其他方法可以做到。

#upper-line {
    border: solid 1px #000;
    width:80%;
    height: 250px;
    border-radius: 50%;
   left:55px;
    border-right: none;
    border-top: none;
    border-bottom: none;
    position: absolute;
    top: 100px;
}

#lower-line {
    border: solid 1px #000;
    width: 80%;
    height: 250px;
    border-radius: 50%;
    top: 340px;
    left: -60px;
    border-left: none;
    border-top: none;
    border-bottom: none;
    position: absolute
}

#content-1 {
    position: absolute;
   left: 180px;
    top: 75px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: orange;
}

#content-2 {
    position: absolute;
   left: 40px;
    top: 200px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: #98879A;
}

#content-3 {
    position: absolute;
   left: 400px;
    top: 400px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: #637DBA;
}

<div id="upper-line"></div>

<div id="lower-line"></div>

<div id="content-1">content 1</div>

<div id="content-2">content 2</div>

<div id="content-3">content 3</div>

注意：这只是一个例子，你必须做一些工作才能让它为你工作。代码可以更简洁。

看看它是如何在小提琴上工作的