Javascript 连接2个div的边框或虚线

我在用虚线连接2个div时遇到问题，我尝试用

：：after

和

：：before

执行此操作，但没有成功。您可以通过以下网址查看我的结构：

以及我想要实现的形象：

这可能吗？如果是，那么我应该在代码中添加或更改什么

谢谢

---

非常感谢，

使用：before/：after和border radius可以实现这一点（严格使用css）。我在下面举了一个例子

.box右上角{
位置：相对位置；
}
.右上角：之后{
内容：''；
边框右下半径：175px；
宽度：106%；
位置：绝对位置；
底部边框：2倍纯红；
右：0；
底部：-175px；
高度：185px；
边框底部样式：虚线
}
.盒子底部：之前{
内容：''；
宽度：66%；
边框顶部：2件纯红；
高度：135px；
位置：绝对位置；
顶部：-125px；
边框左上半径：150px；
边框顶部样式：虚线；
}
.箱顶，.箱底{
位置：相对位置；
宽度：100%；
最小高度：400px；
}
.box左上角、.box右上角、.box bt左上角、.box bt右下角{
浮动：左；
}
.box左上方，.box bt右上方{
宽度：65%；
背景色：红色；
颜色：白色；
最小高度：190px；
文本对齐：居中；
填充顶部：10px；
}
.box右上角，.box bt左下角{
宽度：30%；
边框：2件纯黑；
左缘：2%；
最小高度：90px；
文本对齐：居中；
填充顶部：10px；
}
.左框{
左边距：0；
保证金权利：2%；
}
.对{
背景颜色：灰色；
}

这是左上角的盒子
这是右上角的盒子
这是左下角的盒子
这是右下角的盒子

请拨弄我为您工作的小提琴。。。这是一个小小的进步 但是你可以在任何地方重复使用它

如果您想在html中添加新行，请添加

<div id="svgContainer" style="margin: 50px 50px;">
<svg id="svg1" width="0" height="0">
  <path id="myNewPath" d="M0 0" stroke-width="0.3em" style="stroke:#555;     fill:none;  " />
  ##### over here add new <path like the one up and put special name ID 
</svg>
</div>

看到这个了吗 连接元素（$（“#svg1”）、$（“#myNewPath”）、$（“#fromLine”）、$（#toLine”）

#myNewPath : path name you put in html 
#fromLine : ID or class of the first block 
#toLine   : ID or class of second block .... 

您可以链接任意数量的块 顺便说一句，它反应灵敏

请检查以下内容：

p.S.：没有Js，只有Css

.container{
位置：相对位置；
}
.线路{
位置：绝对位置；
左：65px；
顶部：250px；
右：0；
宽度：420px；
边框底部：1px实心#000；
-ms变换：旋转（7度）；
-webkit变换：旋转（7度）；
变换：旋转（-45度）；z索引：1；
}
.箱顶，.箱底{
位置：相对位置；
宽度：100%；
最小高度：400px；
}
.box左上角、.box右上角、.box bt左上角、.box bt右下角{
浮动：左；
}
.box左上方，.box bt右上方{
宽度：65%；
背景色：红色；
颜色：白色；
最小高度：190px；
文本对齐：居中；
填充顶部：10px；
}
.box右上角，.box bt左下角{
宽度：30%；
边框：2件纯黑；
左缘：2%；
最小高度：90px；
文本对齐：居中；
填充顶部：10px；
}
.左框{
左边距：0；
保证金权利：2%；
}
.对{
背景颜色：灰色；
}

这是左上角的盒子
这是右上角的盒子
这是左下角的盒子
这是右下角的盒子

直线？还是像你画的那样弯曲？如果是的话，哪种曲线？弯曲的，如果可能的话。我喜欢这个想法，我会尝试定制这种方法一点。。。谢谢，很有创意。你能解释一下我怎样才能把线的水平部分向下移动一点，这样它就不会在左上div的上方了吗？谢谢

#myNewPath : path name you put in html 
#fromLine : ID or class of the first block 
#toLine   : ID or class of second block ....