如何使用CSS绘制从一个元素到另一个元素的曲线-直线-曲线

我想在两个元素之间绘制一条曲线，如图中的绿线所示：

我曾尝试使用Javascript和SVG（下面的代码改编自一篇在线文章），但在某些屏幕宽度的实践中并不一致，在不需要的位置留下了混乱的工件。 我想知道是否有CSS解决方案。有或没有SCS。 曲线应从圆形图像的底部中心开始，并以一条到下一个圆形图像顶部中心的曲线结束。在两条曲线之间画一条线。有什么建议吗

示例HTML（它是一个基于Bootstrap4的Wordpress站点）

---

你能告诉我们到目前为止你已经尝试了什么，并显示你的页面的基本结构吗。SVG听起来可能是答案，因此了解哪些地方不起作用会很有帮助。

<section class="mt-5 mb-5 content-section" id="content-1">
    <div class="container">
        <div class="row">
            <div class="col-md-6 my-auto p-5">
                <div class="lc-block">
                    <img class="img-fluid curved-right" src="https://images.unsplash.com/photo-1503624886539-b1355ee1a745?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjM3ODR9&amp;s=05d1b7e1db6bcbdc11c57c357768c11c" alt="">
                </div>
            </div>
            <div class="col-md-6 my-auto">
                <div class="lc-block mb-3 mr-lg-5">
                    <div>
                        <h2>Hello World!</h2>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Nullam tincidunt ac augue suscipit rhoncus. Donec ante erat, hendrerit sed eleifend et, dapibus at leo. Mauris bibendum mi ut dui sagittis volutpat.</p>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt ac augue suscipit rhoncus. Donec ante erat, hendrerit sed eleifend et, dapibus at leo. Mauris bibendum mi ut dui sagittis volutpat.<br></p>
                    </div>
                </div>
                <div class="lc-block"><a class="btn btn-primary mt-2" href="#" role="button">Click me, I'm a button</a></div>
                <!-- /lc-block -->
            </div>
        </div>
    </div>
</section>
<section class="mt-5 mb-5 content-section" id="content-2">
    <div class="container">
        <div class="row">
            <div class="col-md-6 my-auto">
<div class="lc-block mb-3 mr-lg-5">
                    <div>
                        <h2>Hello World!</h2>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Nullam tincidunt ac augue suscipit rhoncus. Donec ante erat, hendrerit sed eleifend et, dapibus at leo. Mauris bibendum mi ut dui sagittis volutpat.</p>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt ac augue suscipit rhoncus. Donec ante erat, hendrerit sed eleifend et, dapibus at leo. Mauris bibendum mi ut dui sagittis volutpat.<br></p>
                    </div>
                </div>
                <div class="lc-block"><a class="btn btn-primary mt-2" href="#" role="button">Click me, I'm a button</a></div>
                <!-- /lc-block -->
            </div>
            <div class="col-md-6 my-auto p-5">
                <div class="lc-block">
                    <img class="img-fluid curved-left" src="https://images.unsplash.com/photo-1503624886539-b1355ee1a745?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjM3ODR9&amp;s=05d1b7e1db6bcbdc11c57c357768c11c">
                </div>
            </div>
        </div>
    </div>
</section>

<svg id="svg">
<line class="line original" stroke-solid="10"/>
</svg>

    jQuery(document).ready(function ($) {
    var size = 0;
    if (window.innerWidth > 767) {
        var tl = makeSVG('path', {'class': 'curve curve-tl original', fill: 'none'});
        var bl = makeSVG('path', {'class': 'curve curve-bl original', fill: 'none'});
        var br = makeSVG('path', {'class': 'curve curve-br original', fill: 'none'});
        var tr = makeSVG('path', {'class': 'curve curve-tr original', fill: 'none'});

        document.getElementById('svg').appendChild(tl);
        document.getElementById('svg').appendChild(tr);
        document.getElementById('svg').appendChild(bl);
        document.getElementById('svg').appendChild(br);
    }
    const config = {
        target: $('#theme-main .content-section'),
        line: $(".line"),
        delay: 60 
    }
    const drawBetweenObjectsEdge = {
        makeLine: function (line, div1div, div2div) {
            if (window.innerWidth > 767) {
                var div1 = $(div1div).find('.block');
           var div1img = $(div1div).find('.block img');    
                var div2 = $(div2div).find('.block');
                var div2img = $(div2div).find('.block img');
                var className = $(div1div).attr('id') + $(div2div).attr('id');
                var startdiv;
                var enddiv;
                if ($(div1img).hasClass('curved-right')) {
                    startdiv = 'bl';
                    enddiv = 'tr';
                } else if ($(div1img).hasClass('curved-left')) {
                    startdiv = 'br';
                    enddiv = 'tl';
                }
                if (className) {
                    if (className.includes("undefined") !== true) { 
                        var curvestart = $('.curve.original.curve-' + startdiv);
                        var curveend = $('.curve.original.curve-' + enddiv);
                        var x1, y1, x2, y2;
                        x1 = div1.offset().left + (div1.width() / 2);
                        y1 = div1.offset().top + (div1.height());
                        x2 = div2.offset().left + (div1.width() / 2);
                        y2 = div2.offset().top;
                        size = (y2 - y1) / 2;
                        $(tl).attr('d', 'M0,0 a' + size + ',' + size + ' 0 0,1 ' + size + ',-' + size);
                        $(tr).attr('d', 'M0,0 a' + size + ',' + size + ' 0 0,1 ' + size + ',' + size);
                        $(bl).attr('d', 'M0,0 a' + size + ',' + size + ' 0 0,0 ' + size + ',' + size);
                        $(br).attr('d', 'M0,0 a' + size + ',' + size + ' 0 0,1 -' + size + ',' + size);
                        $(curvestart).clone().addClass('deleteMe').addClass(className).removeClass("original").insertAfter(curvestart);
                        $(line).clone().addClass('deleteMe').addClass(className).removeClass("original").insertAfter(line);
                        $(curveend).clone().addClass('deleteMe').addClass(className).removeClass("original").insertAfter(curveend);
                        var t = "translate(" + (x1) + "," + (y1) + ")";
                        $(curvestart).attr('transform', t);
                        if (startdiv == 'br') {
                            $(".line." + className).attr('x1', x1 - size).attr('y1', y1 + size).attr('x2', x2 + size).attr('y2', y2 - size); 
                            t = "translate(" + (x2) + "," + (y2) + ")";
                            $(curveend).attr('transform', t);
                        } else {
                            $(".line." + className).attr('x1', x1 + size).attr('y1', y1 + size).attr('x2', x2 - size).attr('y2', y2 - size);
                            t = "translate(" + (x2 - size) + "," + (y2 - size) + ")";
                            $(curveend).attr('transform', t);
                        }
                    } else {
                        console.error("undefined object")
                    }
                }
            }
        },
        findLines: function (search) {
            $(".deleteMe").remove();
            var counter = 0;
            if (window.innerWidth > 767) {
                $(search).each(function (index, el) {
                    counter++;
                    console.log((this).outerHTML);
                    if (search.eq(index + 1).length) { 
                        drawBetweenObjectsEdge.makeLine(config.line, $(this), search.eq(index + 1));                    }
                });
            }
        },
        init: function () {
            if (window.innerWidth > 767) {
                drawBetweenObjectsEdge.findLines(config.target);
                var resizeId;
                $(window).resize(function () {
                    clearTimeout(resizeId);
                    if (config.delay !== 0) {
                        resizeId = setTimeout(doneResizing, config.delay);
                    } else {
                        drawBetweenObjectsEdge.findLines(config.target);
                    }
                });
                function doneResizing() {
                    drawBetweenObjectsEdge.findLines(config.target);
                }
            }
        }
    }

    drawBetweenObjectsEdge.init();

    function makeSVG(tag, attrs) {
        var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
        for (var k in attrs)
            el.setAttribute(k, attrs[k]);
        return el;
    }
});