Wymiarowanie i ustawianie właściwości granicy

Question

Czy istnieje css, w którym mogę rozmiar i położenie nieruchomości border-left? Lub "hack"? Poniżej pokazuje, co chciałbym mieć. Czarny prostokąt reprezentuje kolumnę i czerwień, granicę, którą chciałbym mieć na tej kolumnie. Możliwy?

Jeśli nie, czy mogę dodać inny element div, a następnie nadać temu elementowi właściwość border?

Answer 1

:before można użyć elementu pseudo z 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

Można również zrobić to z gradienty i background-clip.

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>