边框或虚线连接2个div

Question

我在使用虚线连接2个div时遇到问题，我尝试使用::after和::before执行此操作，但没有成功。您可以在以下位置查看我的结构：

JS fiddle code

和我想要实现的目标的形象：

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

感谢。

致以最诚挚的问候，

Answer 1

请小提琴我为你工作......它的小小进步JS 但你可以在每个地方重复使用它。

https://jsfiddle.net/m3zoz34f/6/

如果你想在html add

中添加新行

<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>

然后在JS

function connectAll() {
   // connect all the paths you want!
   connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));


}

看到这个 connectElements（$（“＃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 .... 

您可以根据需要链接尽可能多的块 它的响应性BTW。

Answer 2

请查看以下内容：

P.S。：没有Js，只是Css

.container{
  position:relative;
  }

.line{
position:absolute;
left:65px;
top:250px;
right:0;
width:420px;
border-bottom: 1px solid #000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(-45deg);z-index:1;
}

.box-top, .box-bottom{
  position:relative;
  width:100%;
  min-height:400px;
}

.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
  float:left;
}

.box-top-left, .box-bt-right{
  width:65%;
  background-color:red;
  color:white;
  min-height:190px;
  text-align:center;
  padding-top:10px;
}

.box-top-right, .box-bt-left{
  width:30%;
  border:2px solid black;
  margin-left:2%;
  min-height:90px;
  text-align:center;
  padding-top:10px;
}

.box-bt-left{
  margin-left:0;
  margin-right:2%;
}

.box-bt-right{
  background-color:gray;
}

<div class="container">
<div class="box-top">
  <div class="box-top-left">
    This is top left box
  </div>
  <div class="box-top-right">
    This is top right box
  </div>
</div>
<div class="line">
</div>
<div class="box-bottom">
  <div class="box-bt-left">
    This is bottom left box
  </div>
  <div class="box-bt-right">
  This is bottom right box
  </div>
</div>
</div>

Answer 3

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

https://jsfiddle.net/m3zoz34f/8/

.box-top-right{
  position: relative;
}
.box-top-right:after{
    content: ' ';
    border-bottom-right-radius: 175px;
    width: 106%;
    position: absolute;
    border-bottom: 2px solid red;
    right: 0;
    bottom: -175px;
    height: 185px;
    border-bottom-style: dashed
}

.box-bottom:before{
  content: ' ';
  width: 66%;
  border-top: 2px solid red;
  height: 135px;
  position: absolute;
  top: -125px;
  border-top-left-radius: 150px;
  border-top-style: dashed;
}

.box-top, .box-bottom{
  position:relative;
  width:100%;
  min-height:400px;
}

.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
  float:left;
}

.box-top-left, .box-bt-right{
  width:65%;
  background-color:red;
  color:white;
  min-height:190px;
  text-align:center;
  padding-top:10px;
}

.box-top-right, .box-bt-left{
  width:30%;
  border:2px solid black;
  margin-left:2%;
  min-height:90px;
  text-align:center;
  padding-top:10px;
}

.box-bt-left{
  margin-left:0;
  margin-right:2%;
}

.box-bt-right{
  background-color:gray;
}

<div class="box-top">
  <div class="box-top-left">
    This is top left box
  </div>
  <div class="box-top-right">
    This is top right box
  </div>
</div>
<div class="box-bottom">
  <div class="box-bt-left">
    This is bottom left box
  </div>
  <div class="box-bt-right">
  This is bottom right box
  </div>
</div>