html - 如何实现这种效果？它关于边界/线

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>	
  <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>