在中间切割顶部边框

Question

我希望切割中间的顶部边框来做这样的事情：

Example

如何在CSS上执行此操作？

Answer 1

我不认为这是可能的，除非你使用两个div并做这样的事情：

#left_div{border-top: 4px solid blue; border-left: 4px solid blue; margin-
    right: 20px; display: inline-block; padding: 20px}
#right_div{border-top: 4px solid blue; border-right: 4px solid blue; display: 
    inline-block; padding: 20px}

Answer 2

我会把一个绝对定位的div作为你的盒子的孩子，它是相对的。

.child {
  position: absolute
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  width: *as big as you want your space to be (probably like 5px);
  height: *same height as the border*
  z-index:2;
  color: #fff;
}

.parent {
  z-index: 1;
  border: 3px solid blue;
}