如何達到這個效果？其約邊框/線

Question

https://codepen.io/anon/pen/NpoevM

http://imgur.com/a/OQ3cu

我想有小的線來分隔框。我正在考慮如何製作圖片中的線條。我用borders或span思考，但有麻煩低於片斷

#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> \t 
 
    <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

檢查。我爲所有四個div使用了:after，並使用border來創建+號。

#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

在代碼中添加四個教學班格的邊框屬性。

<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

您可以使用 '+' 一個span和位置/風格它

#third { 
 
\t height: 55%; 
 
\t width: 40%; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t float: right; 
 
    position:relative; 
 
} 
 

 
.t-row { 
 
\t height: 100%; 
 
\t display: flex; 
 
} 
 

 
.tbox { 
 
\t width: 50%; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
} 
 

 

 

 

 
.fa { 
 
\t 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> 
 
\t \t <div class="t-row"> 
 
\t \t \t <div class="tbox tb-one"> 
 
\t \t \t \t <i class="fa fa-home" aria-hidden="true"></i> 
 
\t \t \t \t <h1 class="t-text">Home</h1> 
 
\t \t \t </div> 
 
\t \t \t <div class="tbox tb-two"> 
 
\t \t \t \t <i class="fa fa-info-circle" aria-hidden="true"></i> 
 
\t \t \t \t <h1 class="t-text">About</h1> 
 
\t \t \t </div> 
 
\t \t </div> \t 
 
\t \t <div class="t-row"> 
 
\t \t \t <div class="tbox tb-three"> 
 
\t \t \t \t <i class="fa fa-book" aria-hidden="true"></i> 
 
\t \t \t \t <h1 class="t-text">Work</h1> 
 
\t \t \t </div> 
 
\t \t \t <div class="tbox tb-four"> 
 
\t \t \t \t <i class="fa fa-envelope" aria-hidden="true"></i> 
 
\t \t \t \t <h1 class="t-text">Hire</h1> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </section>