Go ahead and create a DIV underneath, margin it up, and add borders! You can add a background to the text to section it out.
Solution 1 :
Solution 2 :
Big thanks to XLIME for the right hint. This is the answer for my problem:
#boxes {
display: flex;
margin-right: -20px;
}
.box {
width: 33.33333%;
margin-right: 20px;
height: 300px;
border-radius: 3px;
border: 1px solid;
}
#footer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
position: relative;
}
#footer-inner {
display: flex;
flex-direction: column;
align-items: center;
background: #ffffff;
z-index: 1;
padding: 0 25px;
}
#headline {
font-size: 16px;
font-weight: 700;
padding-bottom: 12px;
}
#connection-border {
position: absolute;
width: 68%;
height: 98%;
border: 3px solid;
border-top: none;
top: -25px;
}<div id="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer">
<div id="footer-inner">
<span id="headline">Headline</span>
<span>Small text</span>
</div>
<div id="connection-border"></div>
</div>Solution 3 :
While the “just make another <div> with borders” answer will probably make your life easier, here’s an example built with pseudoelements.
In short, it hangs both the vertical and the horizontal lines off of the first and last .box elements, and makes use of both the :before and :after pseudoelements to create those lines.
The last bit of the illusion (lines stopping before the footer text) is accomplished by setting a page-color background on the footer spans, and giving them enough padding to create the appearance of a gap.
In this snippet, I’ve made the vertical lines green and the horizontal lines blue so it’s easier to trace what’s happening.
/* Original styling ===================== */
#boxes {
display: flex;
margin-right: -20px;
}
.box {
width: 33.33333%;
margin-right: 20px;
height: 300px;
border-radius: 3px;
border: 1px solid;
}
#footer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
}
#headline {
font-size: 16px;
font-weight: 700;
padding-bottom: 12px;
}
/* Additional styling ===================== */
:root {
--footer-gap-height: 48px;
}
.box {
position: relative;
}
/* vertical lines */
.box:first-child:before,
.box:last-child:before {
border-left: 1px solid #0f0; /* green */
content: '';
display: block;
height: var(--footer-gap-height);
left: 50%;
position: absolute;
top: 100%;
transform: translateX(-50%);
width: 0;
}
.box:first-child:after,
.box:last-child:after {
border-bottom: 1px solid #00f; /* blue */
content: '';
position: absolute;
top: calc(100% + var(--footer-gap-height));
width: 100%;
}
.box:first-child:after {
left: 50%;
right: auto;
}
.box:last-child:after {
left: auto;
right: 50%;
}
#footer {
position: relative;
}
#footer span {
background-color: #fff;
display: block;
padding-left: 1em;
padding-right: 1em;
}<div id="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer">
<span id="headline">Headline</span>
<span>Small text</span>
</div>Problem :
I need your help. I’ve this three boxes including a text below:
#boxes {
display: flex;
margin-right: -20px;
}
.box {
width: 33.33333%;
margin-right: 20px;
height: 300px;
border-radius: 3px;
border: 1px solid;
}
#footer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
}
#headline {
font-size: 16px;
font-weight: 700;
padding-bottom: 12px;
}<div id="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer">
<span id="headline">Headline</span>
<span>Small text</span>
</div>Now I need to somehow connect the boxes together with the text below. For that I want to draw a line down and to the middle text (vertical center) from the left and right box. The problem is that the lines should start at the middle of the left and right boxes and be also centered when the width of the boxes changes – for example when I resize the browser (responsive).
I’ve first tried using ::before and ::after but I was only able to draw the horizontal lines with total imperfection…
Does anyone has an idea how I can do this?
Comments
Comment posted by Mr. Jo
Thats a nice idea! Very simple – I was too complex here. I’ll try that out and let you know the result!
Comment posted by Mr. Jo
Got it! I’ll post an answer asap.