边界之间无法识别的空间

Question

我有一个容器有四个div＆＃39; s。所有内部div都具有绝对位置和相同的大小。当我添加边框而不是圆圈时，我收到了某种切片的蛋糕：

这个空间的来源是什么？为什么？ jsfiddle link

＆＃13;

＆＃13;

.container {
  position: relative;
  background: black;
  width: 250px;
  height: 250px;
  margin: auto;
  padding: 50px;
}
.container > div {
    position: absolute;
    content: '';
    border-width: 50px;
    border-style: solid;
    border-radius: 50%;
}
.container > div:nth-child(1) {
  border-color: transparent transparent transparent green;
}
.container > div:nth-child(2) {
  border-color: transparent transparent green transparent;
}
.container > div:nth-child(3) {
  border-color: transparent green transparent transparent;
}
.container > div:nth-child(4) {
  border-color: green transparent transparent transparent;  
}

＆＃13;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不是很漂亮的解决方法，但它看起来不错。这个问题似乎是一个渲染工件，所以我想一个真正好的解决方案是不可能的。

.container {
  position: relative;
  background: black;
  width: 250px;
  height: 250px;
  margin: auto;
  padding: 50px;
}
.container > div {
    position: absolute;
		content: '';
		border-width: 50px;
		border-style: solid;
		border-radius: 50%;
}
.container > div:nth-child(1) {
  border-color: transparent transparent transparent green;
  transform: translate3d(1px, 0 , 0);
}
.container > div:nth-child(2) {
	border-color: transparent transparent green transparent;
  transform: translate3d(0, -1px , 0);
}
.container > div:nth-child(3) {
  border-color: transparent green transparent transparent;
  transform: translate3d(-1px, 0 , 0);
}
.container > div:nth-child(4) {
  border-color: green transparent transparent transparent;  
  transform: translate3d(0, 1px , 0);
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

不确定原因，但这可以解决您的问题

.container > div:nth-child(4) {
    border-color: green;
}

＆＃13;

＆＃13;

.container {
  position: relative;
  background: black;
  width: 250px;
  height: 250px;
  margin: auto;
  padding: 50px;
}
.container > div {
    position: absolute;
		content: '';
		border-width: 50px;
		border-style: solid;
		border-radius: 50%;
}
.container > div:nth-child(1) {
  border-color: transparent transparent transparent green;
}
.container > div:nth-child(2) {
	border-color: transparent transparent green transparent;
}
.container > div:nth-child(3) {
  border-color: transparent green transparent transparent;
}
.container > div:nth-child(4) {
  border-color: green;  
}

＆＃13;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

为div添加背景颜色：

.container {
  position: relative;
  background: black;
  width: 250px;
  height: 250px;
  margin: auto;
  padding: 50px;
}
.container > div {
    position: absolute;
        content: '';
        border-width: 50px;
        border-style: solid;
        border-radius: 50%;
        background-color:green;
}
.container > div:nth-child(1) {
  border-color: transparent transparent transparent green;
}
.container > div:nth-child(2) {
    border-color: transparent transparent green transparent;
}
.container > div:nth-child(3) {
  border-color: transparent green transparent transparent;
}
.container > div:nth-child(4) {
  border-color: green transparent transparent transparent;  
}