javascript - 用于连接 2 个 div 的边框或虚线

Question

我在用虚线连接 2 个 div 时遇到问题，我试图用 ::after 和 ::before 来做到这一点，但没有成功。您可以在以下位置查看我的结构:

JS fiddle code

以及我想要实现的目标的图像:

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

谢谢。

最好的问候，

Answer 1

使用 :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>