I am working on a project where I have to create border-lines between divs that look like these --Design-jpeg
But so far I reachedoutput-jpeg here
where I can't merge them properly
CSS code
export const Container = styled.div`
&:nth-child(even){
justify-content: right;
flex-direction: row-reverse;
text-align: right;
border-right: 3px solid rgba(255, 255, 255, 0.12);
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
&:nth-child(odd){
border: 3px solid rgba(255, 255, 255, 0.12);
border-radius: 30px 30px;
border-right: none;
}`
React-HTML
<Container>
{N.map((elementInArray, index) => (
<Bunch key={index}>
<Box className={'box'+elementInArray}>
<InnerBox/>
</Box>
<TextBox2 className={'textbox'+elementInArray}>
<Heading1>{year}</Heading1>
<Heading3>{'Q' + elementInArray}</Heading3>
<Para>{text}</Para>
</TextBox2>
</Bunch>
)
)}
</Container>Pure HTML, CSS code
body {
background-color: #080e10;
}
main {
padding: 0 60px;
margin: 100px 0;
position: relative;
}
.container {
min-height: 200px;
position: relative;
top: -6px;
}
.container:nth-child(odd) {
border: 3px solid #121f28;
border-left: none;
border-radius: 0 20px 20px 0;
width: calc(100% - 20px);
margin-left: auto;
margin-bottom: -6px;
}
.container:nth-child(even) {
border: 3px solid #121f28;
border-right: none;
border-radius: 20px 0 0 20px;
width: calc(100% - 20px);
margin-right: auto;
top: -3px;
}
main::before {
content: '';
position: absolute;
border: 3px solid #121f28;
border-top: none;
border-right: none;
border-radius: 0 0 0 20px;
width: calc(100% - 140px);
margin-left: auto;
margin-bottom: -6px;
height: 100px;
top: -106px;
}
main::after {
content: '';
position: absolute;
border: 3px solid #121f28;
border-bottom: none;
border-right: none;
border-radius: 20px 0 0 0;
width: calc(100% - 140px);
margin-left: auto;
margin-bottom: -6px;
height: 100px;
bottom: -88px;
}
.box {
width: 140px;
height: 90px;
background-color: #13232a;
position: absolute;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.container:nth-child(odd) .box {
right: -65px;
margin-left: auto;
top: 50px;
}
.container:nth-child(even) .box {
left: -65px;
margin-right: auto;
top: 50px;
}
.circle {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #465157;
border: 5px solid #70797e;
}
.container:nth-child(odd) .item {
text-align: end;
padding-right: 140px;
}
.container:nth-child(even) .item {
text-align: start;
padding-left: 140px;
}
.item h1 {
margin: none;
color: #d1d3d4;
}
.item h3 {
margin: none;
color: #00b6b9;
}
.item p {
text-align: justify;
color: #414548;
} <main>
<div class="container">
<div class="box">
<div class="circle"></div>
</div>
<div class="item">
<h1>2023</h1>
<h3>Q1</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe eius nihil totam esse ratione ullam
molestias ad ea, sunt minima tempora magnam veritatis voluptate dicta! Odit voluptatem eaque dicta
molestiae?
</p>
</div>
</div>
<div class="container">
<div class="box">
<div class="circle"></div>
</div>
<div class="item">
<h1>2023</h1>
<h3>Q2</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe eius nihil totam esse ratione ullam
molestias ad ea, sunt minima tempora magnam veritatis voluptate dicta! Odit voluptatem eaque dicta
molestiae?
</p>
</div>
</div>
<div class="container">
<div class="box">
<div class="circle"></div>
</div>
<div class="item">
<h1>2023</h1>
<h3>Q3</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe eius nihil totam esse ratione ullam
molestias ad ea, sunt minima tempora magnam veritatis voluptate dicta! Odit voluptatem eaque dicta
molestiae?
</p>
</div>
</div>
</main>