I have a container that contains four div elements. Each inner div has an absolute position and the same size. When I add borders to the inner divs, instead of creating circles, I end up with something that looks like a sliced cake:
https://i.sstatic.net/9yNKq.png
Why does this unexpected space appear? 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>