如何用一条线连接两个div？

<style>
    #div1 {
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    
    #div2 {
        width: 100px;
        height: 100px;
        background-color: #00ff00;
        position: absolute;
        top: 200px;
        left: 200px;
    }
    
    .line {
        content: "";
        position: absolute;
        top: 150px;
        left: 150px;
        width: 10px;
        height: 0px;
        background-color: #0000ff;
    }
</style>

<div id="div1"></div>
<div id="div2"></div>
<div class="line"></div>