CODEWITHSUNDEEP
javascripthtmlcss
Morpheus
Morpheus

Reputation: 997

Border or dotted line to connect 2 divs

I have a problem connecting 2 divs with dotted line, and I was trying to do this with ::after and ::before but without success. You can check my structure at:

JS fiddle code

and image of what I want to achieve:

enter image description here

Is this possible? If yes, then what should I add or change in my code?

Thanks.

Best regards,

Upvotes: 2

Views: 3911

Answers (3)

Pat
Pat

Reputation: 2750

Using :before/:after and border-radius you can achieve this (strictly with css). I included an example below.

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>

Upvotes: 3

Emirhan
Emirhan

Reputation: 132

Please check below:

P.S.: No Js, Just 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>

Upvotes: 1

J.Tural
J.Tural

Reputation: 925

please fiddle I work on for you ... its little advance JS but you can reuse it every where .

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

if you want to add new lines over here in 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>

then in the JS 

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


}

see this 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 ....

and you can link as much blocks as you want its responsive BTW .

Upvotes: 0

Related Questions