Dashed line from one element to another (CSS border version)

<script>
    jQuery(document).ready(function($) {
        function genererPointilles($E1, $E2, $parent, zIndex) {
            var borderWidth = 4;

            if (typeof($parent)=='undefined')
                var $parent = $('#ajax-content-wrap');
            if (typeof(zIndex)=='undefined')
                var zIndex = 10;

            var topMargin = $parent.offset().top;
            var leftMargin = $parent.offset().left;

            var Ax = $E1.offset().left+$E1.width()/2-leftMargin;
            var Ay = $E1.offset().top+$E1.height()-topMargin;

            var Bx = $E2.offset().left+$E2.width()/2-leftMargin;
            var By = $E2.offset().top-topMargin;

            if (Bx<Ax)
                var A2x = Ax+(Bx-Ax)/2;
            else
                var A2x = Ax-borderWidth/2;
            var A2y = Ay;
            var A2w = Math.abs((Ax-Bx)/2+borderWidth/2);
            var A2h = Math.abs((By-Ay)/2+borderWidth/2);

            if (Bx<Ax)
                var B2x = Bx-borderWidth/2;
            else
                var B2x = Bx+(Ax-Bx)/2;
            var B2y = Ay+(By-Ay)/2-borderWidth/2;
            var B2w = A2w+borderWidth/2;
            var B2h = A2h+borderWidth/2;

            if (Math.abs(B2x-A2x)<5) {
                A2x = A2x+(A2x-B2x)/2;
                B2x = A2x;
            }

            if (Bx<Ax) {
                var class1 = 'bottomright';
                var class2 = 'topleft';
            }
            else {
                var class1 = 'bottomleft';
                var class2 = 'topright';
            }

            $parent.append('<div class="pointilles '+class1+'" style="left:'+A2x+'px;top:'+A2y+'px;width:'+A2w+'px;height:'+A2h+'px;z-index:'+zIndex+';"></div><div class="pointilles '+class2+'" style="left:'+B2x+'px;top:'+B2y+'px;width:'+B2w+'px;height:'+B2h+'px;z-index:'+zIndex+';"></div>');
        }

        function pointilles() {
            $('.pointilles').remove();
            genererPointilles($('.pointilles-bloc-1 .column-bg-overlay-wrap'), $('.pointilles-bloc-2'));
            genererPointilles($('.pointilles-bloc-2'), $('.pointilles-bloc-3'), $('.pointilles-wrapper-1'), 1);
            genererPointilles($('.pointilles-bloc-3'), $('.pointilles-bloc-4'), $('.pointilles-wrapper-2'), 1);
        }
        pointilles();
        $(window).resize(pointilles);
    });
</script>
<style>
    .pointilles {
        position: absolute;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .pointilles.bottomright {
        border-bottom: 4px dashed #FD7721;
        border-right: 4px dashed #FD7721;
        border-radius: 0 0 50px 0;
    }
    .pointilles.bottomleft {
        border-bottom: 4px dashed #FD7721;
        border-left: 4px dashed #FD7721;
        border-radius: 0 0 0 50px;
    }
    .pointilles.topleft {
        border-top: 4px dashed #FD7721;
        border-left: 4px dashed #FD7721;
        border-radius: 50px 0 0 0;
    }
    .pointilles.topright {
        border-top: 4px dashed #FD7721;
        border-right: 4px dashed #FD7721;
        border-radius: 0 50px 0 0;
    }
</style>