I have been tasked with turning this rough idea into a live page.
虽然我已经建立了基本结构，但我想知道创建连接月份的曲线的最佳方法。
我应该只创建图像并覆盖它们吗？ 有没有办法用某种脚本/编码来绘制它们？ 帆布？
我不知道最好的方法来做到这一点。
我将这些放在一起只是为了向您展示这是很有可能的，并且可能还有其他方法可以做到这一点。
#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>Note:这只是一个例子，您必须做一些工作才能让它为您工作。代码还可以更简洁。
看看它在小提琴上是如何工作的 http://jsfiddle.net/934938tj/