绘制曲线连接网页上的元素 [英] Drawing curved lines to connect elements on web page

问题描述

我的任务是将这个粗略的想法变成实际网页。

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

我应该创建图像和放过他们？
有没有办法用某种脚本/编码来绘制它们？
Canvas？

我不知道最好的方法。

方案

我只是把这一起来告诉你这是非常可能的，可能有其他方法来做。

 ＃upper-line {border：solid 1px＃000;宽度：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;宽度：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>  

div>

注意：这只是一个例子，你必须进行一些工作才能使其工作您。代码可以更干净。

看看它在小提琴上的工作原理

I have been tasked with turning this rough idea into a live page.

While I have a basic structure established and live here, I am wondering the best way to go about creating the curved lines that connect the months.

Should I just create images and over lay them? Is there a way to draw them with some kind of scripting/coding? Canvas?

I don't know the best way to do this.

解决方案

I just put this together to show you that it is very possible and there are probably other ways to do it.

#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: This is just an example, you have to put in a little work to get it to work for you. The code could be even cleaner.

See how it works on fiddle

这篇关于绘制曲线连接网页上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！