Clever Geek Handbook

Unidentified space between borders

I have a container with four div

. All internal ones div

have absolute position and the same dimensions. When I add borders instead of a circle I get some kind of sliced ​​cake:

broken circle

Where did this place come from and why? 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>
Run codeHide result


+3


source to share


3 answers


Not a pretty workaround, but it looks correct. The problem seems to be a rendering artifact, so I think a real nice solution is not possible.



.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>
Run codeHide result


+1


source


Not sure why, but this solves your problem.

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

        
        
        
      

    
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Run codeHide result


0


source


Add background color for 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;  
}
-1


source






More articles:


All Articles