我正在寻找awwwards并看到我喜欢的设计，并认为我会尝试重新创建它。我遇到了一些我想要一些建议的问题。
该网站的时间轴部分是我的重点。我还有其他所有工作或计划，但我不确定如何在此网站上创建响应时间表。我没有WebGL或SVG的经验，所以如果这些是解决方案，我有充分的理由显然获得一些经验。不需要使用2D或3D图形，但这可能是时候了。
我首先尝试使用旋转的li文本重新创建它，最初使用所有px。然后，当我意识到它必须扩展时，我切换到％，但字体大小给了我问题，所以我不知道这是否是最好的行动方案。 My attempt（在本帖末尾也发布了，我知道我没有完成所有浏览器的转换，正在使用chrome进行测试，并且在我完成时会更新它们）只有在显示时才能正常工作窗口是1379px（我也没有完成完整的时间表，因为我认为必须有一个更好的方法来实现这一目标）。所以我只是想找到关于如何更好地重新创建它的想法，页面的源代码没有用（至少我能看到的）。
我还考虑过使用div底部/顶部边框，但我不确定这是否是更好的解决方案。
JSFiddle代码：
<body>
<ul>
<li>
<a href="#">________</a>
</li>
<li>
<a href="#">________</a>
</li>
<li>
<a href="#">________</a>
</li>
<li>
<a href="#">________</a>
</li>
<li alt="5">
<a href="#">________</a>
</li>
<li>
<a href="#">________</a>
</li>
<li>
<a href="#">________</a>
</li>
<li>
<a href="#">____</a>
</li>
<li>
<a href="#">________</a>
</li>
<li alt="10">
<a href="#">____</a>
</li>
<li>
<a href="#">________</a>
</li>
<li>
<a href="#">______________</a>
</li>
<li>
<a href="#">______</a>
</li>
<li>
<a href="#">_________</a>
</li>
<li alt="15">
<a href="#">______</a>
</li>
</ul></body>
CSS：
ul {
margin-top: 80px;
}
li {
width: 30px;
}
ul li {
font-size: 50%;
display: inline-block;
text-transform: uppercase;
}
li a{
color: grey;
}
li:nth-child(1){
margin-top: -1%;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
-o-transform: rotate(-65deg);
transform: rotate(-65deg);
}
li:nth-child(2) {
position: absolute;
margin-top: -1.1%;
left: 5.4%;
}
li:nth-child(3) {
position: absolute;
margin-top: -1.1%;
left: 7.9%;
}
li:nth-child(4) {
position: absolute;
margin-top: -1.1%;
left: 10.5%;
}
li:nth-child(5) {
position: absolute;
margin-top: -.8%;
left: 13.1%;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-o-transform: rotate(65deg);
transform: rotate(15deg);
}
li:nth-child(6) {
position: absolute;
margin-top: -.17%;
left: 15.5%;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-o-transform: rotate(65deg);
transform: rotate(15deg);
}
li:nth-child(7) {
position: absolute;
margin-top: .2%;
left: 17.8%;
}
li:nth-child(8) {
position: absolute;
margin-top: -.4%;
left: 20%;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-o-transform: rotate(65deg);
transform: rotate(-35deg);
}
li:nth-child(9) {
position: absolute;
margin-top: -.6%;
left: 21.4%;
}
li:nth-child(10) {
position: absolute;
margin-top: -1.2%;
left: 23.6%;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-o-transform: rotate(65deg);
transform: rotate(-35deg);
}
li:nth-child(11) {
position: absolute;
margin-top: -1.35%;
left: 25%;
}
li:nth-child(12) {
position: absolute;
margin-top: -1.35%;
left: 27.56%;
}
li:nth-child(13) {
position: absolute;
margin-top: -.75%;
left: 28.57%;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-o-transform: rotate(65deg);
transform: rotate(35deg);
}
li:nth-child(14) {
position: absolute;
margin-top: -.26%;
left: 30.19%;
}
li:nth-child(15) {
position: absolute;
margin-top: -.8%;
left: 32.71%;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-o-transform: rotate(65deg);
transform: rotate(-35deg);
}