SOURCE

<ul class="nav">
  <li>
    <div class="abs lt"></div>
    <div class="abs rt"></div>
    <div class="abs bl"></div>
    <div class="abs br"></div>
    <div class="ell">数据中心</div>
  </li>
  <li>
    <div class="abs lt"></div>
    <div class="abs rt"></div>
    <div class="abs bl"></div>
    <div class="abs br"></div>
    <div class="ell">数据中心</div>
  </li>
  <li>
    <div class="abs lt"></div>
    <div class="abs rt"></div>
    <div class="abs bl"></div>
    <div class="abs br"></div>
    <div class="ell">数据中心</div>
  </li>
  <li>
    <div class="abs lt"></div>
    <div class="abs rt"></div>
    <div class="abs bl"></div>
    <div class="abs br"></div>
    <div class="ell">数据中心</div>
  </li>
  <li>
    <div class="abs lt"></div>
    <div class="abs rt"></div>
    <div class="abs bl"></div>
    <div class="abs br"></div>
    <div class="ell">数据中心</div>
  </li>
  <li>
    <div class="abs lt"></div>
    <div class="abs rt"></div>
    <div class="abs bl"></div>
    <div class="abs br"></div>
    <div class="ell">数据中心</div>
  </li>
  <li>
    <div class="abs lt"></div>
    <div class="abs rt"></div>
    <div class="abs bl"></div>
    <div class="abs br"></div>
    <div class="ell">数据中心</div>
  </li>
  <li>
    <div class="abs lt"></div>
    <div class="abs rt"></div>
    <div class="abs bl"></div>
    <div class="abs br"></div>
    <div class="ell">数据中心</div>
  </li>
  <li>
    <div class="abs lt"></div>
    <div class="abs rt"></div>
    <div class="abs bl"></div>
    <div class="abs br"></div>
    <div class="ell">个人数据中心个人数据中心个人数据中心</div>
  </li>
</ul>

*{margin:0;padding:0;}
html,body{background:#070f29;}
li{list-style:none;}
.nav{overflow:hidden;padding:10px;}
.nav > li{float:left;width:8%;height:106px;line-height:106px;border:1px solid #182e69;background:rgba(10,30,62,.8);text-align:center;color:#00f9ff;position:relative;padding:5px;margin:0 1% 1% 0;cursor:pointer;transition:all .5s;}
.nav > li:last-child{margin-right:0;}
.nav > li:hover{background:rgba(0,249,255,.4);border-color:rgba(0,249,255,.3);}
.abs{position:absolute}
.abs{width:10px;height:10px;border:2px solid #00f9ff;}
.lt{left:-2px;top:-2px;border-right-width:0;border-bottom-width:0;}
.rt{right:-2px;top:-2px;border-left-width:0;border-bottom-width:0;}
.bl{bottom:-2px;left:-2px;border-right-width:0;border-top-width:0;}
.br{bottom:-2px;right:-2px;border-left-width:0;border-top-width:0;}
.ell{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}