CSS：在边角添加空间

Question

我想在左上角的正方形右下角添加空白区域。目前我的代码返回完整的方形边框。但我想在边角处留出空间，如附图
这是我的代码。

HTML

<div class="top-left-corner"></div>

CSS

.top-left-corner{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    border-right: 1px solid #7a7a7a;
    border-bottom: 1px solid #7a7a7a;
    height: 70px;
    width: 70px;
}

这是小提琴 FIDDLE

.top-left-corner {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid #7a7a7a;
  border-bottom: 1px solid #7a7a7a;
  height: 70px;
  width: 70px;
}

<div class="top-left-corner">
</div>

Answer 1

你能做这样的事情（如果你知道广场背后的背景颜色 - https://jsfiddle.net/pz7rcg4u/3/

.top-left-corner:after{
content: "";
position: absolute;
bottom:-1px;
right: -1px;
z-index: 1;
height: 10px; /* size of white space */
width: 10px;
border-right: 1px solid #F3F5F6;
border-bottom: 1px solid #F3F5F6; /* color of white space */

}

Answer 2

您可以使用before和after伪选择器执行此操作：

.top-left-corner {
    top:0;
    left:0;
    position: absolute;
    height: 70px;
    width: 70px;
}

.top-left-corner:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:20px; /*change this for the size of the gap*/
  border-bottom: 1px solid #7a7a7a;
}

.top-left-corner:before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:20px;     /*change this for the size of the gap*/
  border-right: 1px solid #7a7a7a;
}

<div class="top-left-corner"></div>