CSS start border from middle (horizontly) - html

Question

I have a layout where the border starts from middle of the image and merges with the below border
I have tried the following things:
Used background image as border but it cannot acheive the same thing.
I have ried to use :before & :after but unable to make it same like this.
Is there a way to make this??

Answer 1

You could playing around with the css position properties.
Hope it helps:
html
<main>
<section class="hero">
<div class="image-wrapper">
<img src="https://via.placeholder.com/450x150.png" alt="test image">
</div>
<div class="line-1"></div>
</section>
<section class="about">
<div class="content">
<h1>About us</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse, sequi aspernatur inventore, ullam sapiente assumenda dignissimos dolorum voluptatibus nam est vel maxime cum quas. Blanditiis vel obcaecati voluptatibus qui alias.
</p>
</div>
<div class="line-2"></div>
</section>
</main>
and here is the css
:root{
--background-color: #ffffff;
--border: 2px solid green;
--border-radius: 8px;
--offset-left: 120px;
--offset-bottom: 30px;
}
main{
width: 90%;
max-width:1200px;
padding: 0 12px;
margin: 0 auto;
background-color: var(--background-color);
}
.hero{
position: relative;
}
.image-wrapper{
position: relative;
z-index:2;
}
.image-wrapper img{
width:100%;
height:auto;
}
.line-1{
position: absolute;
z-index:1;
width:calc(50% + var(--offset-left));
height:50%;
bottom: calc(var(--offset-bottom) * (-1));
left: calc(var(--offset-left) * (-1));
border-top: var(--border);
border-left: var(--border);
border-bottom: var(--border);
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.about{
position: relative;
top: calc(var(--offset-bottom) / 2);
}
.content{
position: relative;
z-index:2;
text-align: center;
}
.content h1{
display: inline-block;
background-color: var(--background-color);
line-height:1;
padding: 0 10px;
font-size: 24px;
}
.content p{
text-align: left;
margin-top:30px;
}
.line-2{
position: absolute;
z-index:1;
width:calc(50% + var(--offset-left));
height:100%;
top: calc(var(--offset-bottom) / 2);
left: 50%;
border-top: var(--border);
border-right: var(--border);
border-top-right-radius: var(--border-radius);
}
Here is a working pen to play around.