# 11 Eye of sauron. Getting an output that I do not understand.

[drujco]

Dear coders,

Would like to have some opinion as I am not getting there. I have a circle that I am overlapping with another semi-circle, but the contour is still showing up, could you please help me in identifying what is wrong?

Here is my solution:

<div class="frame">
  <div class="outer">
    <div class="middle"> 
      <div class="inner"></div>
    </div>
  </div> 
</div>
<div class="box-left">
  <div class="semi-circle-left">
  	<div class="overlap-left"></div> 
  </div>
</div>
<div class="box-right">
  <div class="semi-circle-right">
  	<div class="overlap-right"></div> 
  </div>
</div>
<div class="left">
  <div class="inner center"></div>
</div>

<div class="right">
	<div class="inner center"></div>
</div>



<style>
  * {
    margin: 0; 
    padding: 0; 
  }
  body {
    background: #191210; 
    display: flex; 
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  .outer, .middle {
    display: flex; 
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative;
    z-index: 2; 
  }
  
  .outer {
    width: 140px; 
    height: 140px; 
    background: #ECA03D;
  }
  
  .middle {
    width: 100px; 
    height: 100px; 
    background: #191210;
  }
  
  .inner {
    width: 50px; 
    height: 50px; 
    background: #84271C; 
    border-radius: 50%;
  }
  
  .left, .right {
    width: 100px;
    height: 100px;
    background: #ECA03D; 
    border-radius: 50%;
    position: absolute;
    z-index: -2;
  }
  
  .left, .right {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .box-left, .box-right {
    width: 100px;
    height: 50px;
    position: absolute;
  }
  
  .box-left {
    left: 50px;
  }
  
  .box-right {
    right: 50px;
  }
  
  .semi-circle-left, .semi-circle-right {
    width: 100px;
    height: 50px;
    position: relative;
    overflow: hidden;
  }
  
  .semi-circle-left {
    bottom: 25px; 
  }
  
  .semi-circle-right {
    top: 25px;
  }
  
  .overlap-left, .overlap-right {
    width: 100px;
    height: 100px;
    background: #191210; 
    position: absolute;
    border-radius: 50%;
  }
  
  .overlap-left {
    top: 0px; 
    z-index: 1;
  }
  
  .overlap-right {
    bottom: 0px; 
    z-index: 1;
  }
  
  .center {
    width: 60px;
    height: 60px; 
    background: #191210;
  }
  
  .left {
    left: 50px;
  }
  
  .right {
    right: 50px;
  }

 </style>

Thank you in beforehand.

Cheers...

[LelouchFR]

why that much divs ?
I mean i made it with only 4 divs.

[SelenIT]

It seems to be because of the anti-aliasing of the rounded edges of the .overlap-left and .overlap-right divs. It makes some pixels at the edge semi-transparent, so they don't hide the orange pixels below them completely. Apparently these divs don't need border-radius at all. And yes, you probably don't need an extra div at all to make a semi-circle 😉