如何不用html5 canvas ，实现两个方框的连线效果？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 5277 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如在网页上画一张流程图，需要将多个方框连接起来。
最简单的实现办法是？

简单是指，少用图片，一点css，简单的html结构。

方框

简单

html5

22 条回复 1970-01-01 08:00:00 +08:00

zythum

2011-06-15 09:29:11 +08:00

用div实现啊。height:2px 这样不就是线了。

darasion

2011-06-15 09:35:37 +08:00

@zythum 那斜着的线段怎么画？

chuangbo

2011-06-15 09:37:49 +08:00

http://oldj.net/static/drjs/doraemon.html

sparanoid

2011-06-15 09:39:31 +08:00

transform: rotate

zythum

2011-06-15 09:43:00 +08:00

@darasion transform: rotate +1
如果想在ie也支持的话，那只能用边框画了，还要用两个div，一个去遮另一个。就麻烦了。如果你需要的话我再说。比较麻烦。

darasion

2011-06-15 10:41:32 +08:00

多啦A梦那个好复杂啊。。。一个应用系统不可能让这样乱搞的。

Aben

2011-06-15 11:28:55 +08:00

用border,4条小用不同颜色和宽度可以组合出很多图形。

est

2011-06-15 12:09:34 +08:00

@darasion 斜线可以用div的border画。

darasion

2011-06-15 12:39:51 +08:00

@est @Aben @zythum

div border 这种，能举例说明一下该怎样做吗？

zythum

2011-06-15 12:58:23 +08:00

@darasion 朱一去考试了。等朱一回来。要不@est 同学给说下。拜

est

2011-06-15 13:55:11 +08:00

想了一下，div只可以用来画三角形，斜线可能还有点困难

http://www.uselesspickles.com/triangles/

是在不行只能用svg+vml了。

zythum

2011-06-15 15:24:53 +08:00

@darasion 试试下面的代码看看

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
background{
background:#fff;
}
div{
position:absolute;
top:10px;
left:10px;
height:0;
top:0;
}
#cover{
border:100px solid;
border-color:#fff transparent transparent transparent;
left:12px;
}
#line{
border:100px solid;
border-color:#000 transparent transparent transparent;
}
</style>
</head>
<body>
<div id="line"></div>
<div id="cover"></div>
</body>
</html>