境界線の間に認識されないスペース

Question

私はdivの4つのコンテナを持っています。すべての内divは絶対位置と同じサイズを持っています。私はスライスされたケーキのいくつかの種類を受け取る代わりに、円の境界線を追加する場合：

このスペースはから来て、なぜどこ？ jsfiddle link

.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; 
 
}

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

Answer 1

ない非常にきれいな回避策を、それが右に見えます。問題はレンダリングアーティファクトと思われるので、本当の素晴らしい解決策は不可能だと思います。

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

の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; 
} 

Answer 3

なぜ

わからない、しかし、あなたが代わりに1の4つの異なるdiv要素を持っている必要がありますなぜこれがあなたの問題

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

.container { 
 
    position: relative; 
 
    background: black; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: auto; 
 
    padding: 50px; 
 
} 
 
.container > div { 
 
    position: absolute; 
 
\t \t content: ''; 
 
\t \t border-width: 50px; 
 
\t \t border-style: solid; 
 
\t \t border-radius: 50%; 
 
} 
 
.container > div:nth-child(1) { 
 
    border-color: transparent transparent transparent green; 
 
} 
 
.container > div:nth-child(2) { 
 
\t 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; 
 
}

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