Question

我想知道如何将两个div元素连接成一条与本网站中的距离类似的线： source code

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添加到其父容器中，使其相对于此位置。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: