линии от одного блока к другому

Question

Как делаются таки вот линии. Если есть возможность реализовать ее только на css? Подскажите как называются такие линии, чтобы погуглить про них и разобраться.

Answer 1

.block {
    position: reltive;
    
    width:    300px;
    height:   600px;
    
    background: #d0ffff;
}

.card {
    position: relative;
    z-index: 2;

    box-sizing: border-box;

    width: 150px;
    height: calc(100% / 4 - 10px);
    
    margin: 0px 0px 0px 70px;
    padding: 20px 0px 0px 50px;
    
    font-family: arial;
    font-weight: bold;
    font-size: 36px;    

    color: black;
    background: white;
    
    border: 1px solid #d0d0d0;
}

.card:after {
    content: "";
    
    position: absolute;
    left: 0px;
    top: 40px;
    
    width:  40px;
    height: 2px;
    
    background: #4782c6;
}

.card.selected {
    border: 1px solid #4782c6;
    color: white;
    background: #4782c6;
}

.card.selected:after {
    background: white;
}

.lines {
    position: absolute;
    z-index: 1;
    
    left: 20px;
    top: 50px;
        
    border: 2px dashed #d0d0d0;
    border-right: none;
    
    width: 70px;
    height: calc(3 * calc(100% / 4 - 10px) - 10px);
}

<div class = 'block'>

    <div class = 'lines'></div>

    <div class = 'card selected'>01</div>
    <div class = 'card'>02</div>
    <div class = 'card'>03</div>
    <div class = 'card'>04</div>
    
</div>

БЛОГ НА HUSL

линии от одного блока к другому

Ответы (1 шт):