CSS：在边框角落添加空间答案

【问题标题】：CSS : add space in border cornerCSS：在边框角落添加空间
【发布时间】：2016-02-02 12:08:21
【问题描述】：

我想在左上边框方块的右下角添加空白。目前我的代码返回完整的方形边框。但我想在边框角落留出空间，如附加图片。

这是我的代码。

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>

【问题讨论】：

在左上（或）右下？在您的图像中，它看起来像右下角。（不是重复的，但这个帖子中的答案应该会给你这个想法 - stackoverflow.com/questions/31205386/…）
是的，那个角位于页面的左上角，但我想要右下角的边框。谢谢指正。

标签： html css

【解决方案1】：

您可以使用 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;
}

&lt;div class="top-left-corner"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你能做这样的事情吗（如果你知道你的方块后面的背景颜色 - 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 */

}

【讨论】：

谢谢，这正是我需要的:)