2つのdiv間に水平/垂直線を接続するにはどうすればよいですか？

Question

私も一種の本サイト内の1つのように離れているラインを持つ2つのdiv要素を接続する方法を思ったんだけど：

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

あなたが水平方向と垂直方向のdivのためにこれを行うだろうか？ ご協力いただければ幸いです！おかげさまで

Answer 1

あなたは、次のCSSとコネクタのように見えるようにconnectorとスタイルこのような何かのクラスとdiv要素を作成することができます。

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

あなたが境界線の太さで遊んで、このの外観を変更することができます、色とボーダー半径。これはスタイリングを担当します。

正しく配置するには、絶対位置または相対位置を使用できます。絶対配置を使用する場合は、connectorクラスにposition:absoluteを適用してください。それを配置するには、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>