如何避免div之间外角的边框间隙

Question

我正在使用边框在一些 div 之间绘制 "walls"，但在其他 div 之间不绘制。我在每个 div 中添加了一个实线边框，以形成一个 divider。目前我有这样的东西：

A 和 B 设置了 right/left 边框，A/C 设置了 bottom/top 边框。 D没有边框。

当前 CSS：Code Pen

.a {
  background-color: lightblue;
  border-right: 10px solid black;
  border-bottom: 10px solid black;
}
.b {
   background-color: cyan;
   border-left: 10px solid black;
}
.c {
  background-color: lightpink;
  border-top: 10px solid black;
}
.d{
  background-color: lightgreen;
}
.a, .b, .c, .d {
  width: 100px;
  height: 100px;
  float:left;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

我真的很想去掉 D 的小缺口。有没有简单的方法可以做到这一点？

Answer 1

试试这个：

.d {
  position: relative;
}

.d:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  background-color: #000;
  left: 0px;
  top: 0;
}

 .a {
  background-color: lightblue;
  border-right: 10px solid black;
  border-bottom: 10px solid black;
}

.b {
   background-color: cyan;
   border-left: 10px solid black;
}

.c {
  background-color: lightpink;
  border-top: 10px solid black;
}

.d {
  background-color: lightgreen;
}

.a, .b, .c, .d {
  width: 100px;
  height: 100px;
  float:left;
  box-sizing: border-box;
  display: flex;
  justify-content: center;

}

.d {
  position: relative;
}

.d:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  background-color: #000;
  left: 0px;
  top: 0;

}

 <div>
     <div class='a'>a</div>
     <div class='b'>b</div>
</div>
<div style='clear:both;'>
     <div class='c'>c</div>
     <div class='d'>d</div>
</div>

Answer 2

.a {
  background-color: lightblue;
  border-right: 10px solid black;
  border-bottom: 10px solid black;
}
.b {
   background-color: cyan;
   border-left: 10px solid black;
}
.c {
  background-color: lightpink;
   border-top: 10px solid black;
}
.d{
  background-color: lightgreen;
  position: relative;
  border-top: 10px solid transparent;
}
.a, .b, .c, .d {
  width: 100px;
  height: 100px;
  float:left;
  box-sizing: border-box;
  text-align: center;
}
.d > span{
  position: absolute;
  display: inline-block;
  width: 10px;
  height :10px;
  background-color: black;
  top:-10px;
  left: 0;
}

>

<div>
  <div class='a'>a</div>
  <div class='b'>b</div>
</div>
<div style='clear:both;'>
  <div class='c'>c</div>
  <div class='d'><span></span>d</div>
</div>

.a {
  background-color: lightblue;
  border-right: 10px solid black;
  border-bottom: 10px solid black;
}
.b {
   background-color: cyan;
   border-left: 10px solid black;
}
.c {
  background-color: lightpink;
   border-top: 10px solid black;
}
.d{
  background-color: lightgreen;
  position: relative;
  border-top: 10px solid transparent;
}
.a, .b, .c, .d {
  width: 100px;
  height: 100px;
  float:left;
  box-sizing: border-box;
  text-align: center;
}


.d > span{
  position: absolute;
  display: inline-block;
  width: 10px;
  height :10px;
  background-color: black;
  top:-10px;
  left: 0;
}

<div>
  <div class='a'>a</div>
  <div class='b'>b</div>
</div>
<div style='clear:both;'>
  <div class='c'>c</div>
  <div class='d'><span></span>d</div>
</div>

这是我的答案，但这只是一个技巧。

对不起。实际上，我找不到其他更好的解决方案。

如何避免div之间外角的边框间隙

How to avoid border gap in outside corner between divs

html

css

border