How to achieve this effect? its about borders/lines - html

Question

https://codepen.io/anon/pen/NpoevM
http://imgur.com/a/OQ3cu
I want to have the small lines to separate the boxes. I was thinking about how to make the lines like in the picture. I was thinking using borders or span but having trouble
#third {
height: 55%;
width: 40%;
display: flex;
flex-direction: column;
float: right;
}
.t-row {
height: 100%;
display: flex;
}
.tbox {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fa {
font-size: 5em !important;
}
<section id="third">
<div class="hr-lines">
<hr class="icon-sep">
</div>
<div class="t-row">
<div class="tbox tb-one">
<i class="fa fa-home" aria-hidden="true"></i>
<h1 class="t-text">Home</h1>
</div>
<div class="tbox tb-two">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<h1 class="t-text">About</h1>
</div>
</div>
<div class="t-row">
<div class="tbox tb-three">
<i class="fa fa-book" aria-hidden="true"></i>
<h1 class="t-text">Work</h1>
</div>
<div class="tbox tb-four">
<i class="fa fa-envelope" aria-hidden="true"></i>
<h1 class="t-text">Hire</h1>
</div>
</div>
</section>

Answer 1

check below snippet. I have used :after for all four div and used border to create the + sign.
#third {
height: 55%;
width: 40%;
display: flex;
flex-direction: column;
float: right;
}
.t-row {
height: 100%;
display: flex;
}
.tbox {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fa {
font-size: 5em !important;
}
.tb-one,
.tb-two,
.tb-three,
.tb-four {
position: relative;
}
.tb-one:after,
.tb-two:after,
.tb-three:after,
.tb-four:after {
position: absolute;
content: " ";
border: 1px solid #000;
width: 20px;
height: 20px;
display: block;
}
.tb-one:after {
bottom: 0;
right: 0;
border-top: none;
border-left: none
}
.tb-two:after {
bottom: 0;
left: 0;
border-top: none;
border-right: none
}
.tb-three:after {
top: 0;
right: 0;
border-bottom: none;
border-left: none
}
.tb-four:after {
top: 0;
left: 0;
border-bottom: none;
border-right: none
}
<section id="third">
<div class="hr-lines">
<hr class="icon-sep">
</div>
<div class="t-row">
<div class="tbox tb-one">
<i class="fa fa-home" aria-hidden="true"></i>
<h1 class="t-text">Home</h1>
</div>
<div class="tbox tb-two">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<h1 class="t-text">About</h1>
</div>
</div>
<div class="t-row">
<div class="tbox tb-three">
<i class="fa fa-book" aria-hidden="true"></i>
<h1 class="t-text">Work</h1>
</div>
<div class="tbox tb-four">
<i class="fa fa-envelope" aria-hidden="true"></i>
<h1 class="t-text">Hire</h1>
</div>
</div>
</section>

Answer 2

In your code add four classes with border property of div.
<style>
#third {
height: 55%;
width: 40%;
display: flex;
flex-direction: column;
float: right;
}
.t-row {
height: 100%;
display: flex;
}
.tbox {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fa {
font-size: 5em !important;
}
.left-border{ border-left : 1px solid;}
.right-border{ border-right : 1px solid;}
.bottom-border{ border-bottom : 1px solid;}
.top-border{ border-top: 1px solid;}
</style>
<section id="third">
<div class="hr-lines">
<hr class="icon-sep">
</div>
<div class="t-row">
<div class="tbox tb-one right-border bottom-border">
<i class="fa fa-home" aria-hidden="true"></i>
<h1 class="t-text">Home</h1>
</div>
<div class="tbox tb-two left-border bottom-border">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<h1 class="t-text">About</h1>
</div>
</div>
<div class="t-row">
<div class="tbox tb-three top-border right-border">
<i class="fa fa-book" aria-hidden="true"></i>
<h1 class="t-text">Work</h1>
</div>
<div class="tbox tb-four top-border left-border">
<i class="fa fa-envelope" aria-hidden="true"></i>
<h1 class="t-text">Hire</h1>
</div>
</div>
</section>

Answer 3

You can use a '+' inside a span and position / style it
#third {
height: 55%;
width: 40%;
display: flex;
flex-direction: column;
float: right;
position:relative;
}
.t-row {
height: 100%;
display: flex;
}
.tbox {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fa {
font-size: 5em !important;
}
.lines { position:absolute; font-size:150px; top:17%; left:40% }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<section id="third">
<span class="lines">+</span>
<div class="t-row">
<div class="tbox tb-one">
<i class="fa fa-home" aria-hidden="true"></i>
<h1 class="t-text">Home</h1>
</div>
<div class="tbox tb-two">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<h1 class="t-text">About</h1>
</div>
</div>
<div class="t-row">
<div class="tbox tb-three">
<i class="fa fa-book" aria-hidden="true"></i>
<h1 class="t-text">Work</h1>
</div>
<div class="tbox tb-four">
<i class="fa fa-envelope" aria-hidden="true"></i>
<h1 class="t-text">Hire</h1>
</div>
</div>
</section>