Калибровка и позиционирование свойства границы

Question

Есть ли css, где я мог бы размер и положение border-left? Или «взломать»? Ниже показано, что я хотел бы иметь. Черный прямоугольник представляет столбец и красный, границы, которые я хотел бы иметь в этой колонке. Возможное?

Если нет, могу ли я добавить еще один div внутри, то дайте этому div свойство границы?

Answer 1

Вы можете использовать :before псевдо элемент с position: absolute

.column { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.column:before { 
 
    content: ''; 
 
    height: 50px; 
 
    width: 3px; 
 
    background: red; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="column">Column</div>

Answer 2

Вы можете также сделать это с помощью градиентов и фона клипа.

div { 
 
    width: 100px; 
 
    height: 300px; 
 
    border-width: 2px; 
 
    border-style: solid; 
 
    border-color: black black black transparent; 
 
    background-image: linear-gradient(white, white), linear-gradient(to bottom, black 30%, red 30%, red 60%, black 0); 
 
    background-clip: padding-box, border-box; 
 
}

<div></div>