connecting boxes with arrows in CSS [closed]

Question

I was wondering if it's possible to make such design using CSS?

I would greatly appreciate any piece of code.

Answer 1

I would do it that way,

#box1, #box2 , #box3
{
    width: 25%;
    height: 25%;
    position: absolute;
}

#box1
{
    left: 25%;
    top: 25%;
    border-left: 2px dashed black;
    border-right: 1px dashed black;
    border-bottom: 2px dashed black;
    z-index: 1;
}
 #box2 
{
    right: 25%;
    top: 25%;
    border-left: 1px dashed black;
    border-right: 2px dashed black;
    border-bottom: 2px dashed black;
    z-index: 1;
}
 #box3
{
    right: 37.5%;
    top: 40%;
    z-index: 2;
}

box3 is layered above box1 & box2 so it will hide the 'extra' border.

that will get you the basic design. (alter the sizes to your needs) you will have to add the arrow-heads by creating CSS triangles, or using images and absolute position them as well.