css两个div用直线连接

在CSS中，我们可以使用伪元素::before或::after来实现两个div之间的直线连接。首先，让我们来创建两个div元素：

    div id="div1">
    /div>
        div id="div2">
    /div>

接下来，我们使用CSS将这两个div元素垂直居中并设置宽度和高度：

    #div1, #div2 {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100px;
            height: 50px;
    }

现在，我们来创建直线连接。我们可以使用::before或::after伪元素来创建它。我们将伪元素添加到#div1元素上，并设置其宽度，高度，背景颜色和位置：

    #div1::before {
            content: "";
            position: absolute;
            width: 1px;
            height: 60px;
            background-color: black;
            left: 50%;
            transform: translateX(-50%);
    }
    

现在，我们已经成功的在两个div之间创建了一条黑色竖直直线。如果需要在不同位置连接多个div，只需复制此段代码并更改left的属性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！