CSS generated content can solve this for you:
div {
position: relative;
}
/* Main div for border to extend to 50% from bottom left corner */
div:after {
content: “”;
background: black;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}
Lorem Ipsum
(note – the content: “”; declaration is necessary in order for the pseudo-element to render)
Hope this helps:
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}