ボーダープロパティのサイズと位置を設定する

Question

border-leftプロパティのサイズと位置を設定できるCSSはありますか？または "ハック"？以下は私が持っているものを示しています。黒い矩形は列を表し、赤はその列にある境界線を表します。可能？

もしそうでなければ、別のdivを内部に追加してそのdivに境界プロパティを与えることはできますか？

Answer 1

あなたはまた、グラデーション、背景クリップでこれを行うことができます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

で:before擬似要素を使用することができます。

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>