html - 如何连接两个div之间的水平/垂直线？

Question

我想知道如何用一条直线连接两个 div 元素，这条直线的距离有点像本网站中的那条线:

JSFiddle link: https://jsfiddle.net/mcbvb8m2/

对于水平和垂直 div，您将如何做到这一点？任何帮助，将不胜感激!谢谢。

Answer 1

您可以使用类似 connector 的类创建一个 div，并使用以下 CSS 将其设置为看起来像连接器:

.connector {
  border: 6px solid #333;
  border-right: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  height:50px;
  width: 10px;
}

您可以通过调整边框厚度、颜色和边框半径来改变它的外观。这会处理样式。

要正确定位它，您可以使用绝对定位或相对定位。在这种情况下，要使用绝对定位，请将 position:absolute 应用于 connector 类。要定位它，请使用 top、bottom、left 和 right 等属性。绝对位置将相对于整个页面绝对定位元素，因此我建议将 position:relative 添加到其父容器，以便它相对于此定位。

.container{
 height:800px;
 width:100%;
 padding:50px;
background:#eeeeee;
    position:relative;
  }

.box-1{
  height:300px;
  width:300px;
  background:blue;
  color:#fff;
  margin-bottom:30px;
 }

.box-2{
  height:300px;
  width:300px;
  background:red;
  color:#fff;
 }

.connector {
  position:absolute;
  top: 335px;
  left: 35px;
  border: 6px solid #333;
  border-right: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  height:50px;
  width: 10px;
}

<div class="container">

  <div class="box-1">
    Box 1
  </div>
  
  <div class="box-2">
    Box 2
  </div>
  
  <div class="connector"></div>

</div>