entfernen Sie einen Teil der kreisförmigen Div von unten

Question

Ich arbeite mit einigen CSS Formen und ich machte eine kreisförmige div. Ich habe einige spezifische Design-Anforderungen, die besagt, dass die obere Hälfte des kreisförmigen div sollte sichtbar sein und sollte auf der Unterseite des div ausgerichtet werden. Die untere (unter dem unteren) Hälfte sollte ausgeblendet werden.

Das Problem Ich möchte die untere Hälfte der kreisförmigen div entfernen. Es überschneidet sich in der nächsten div.

Ich versuchte z-index aber immer noch hier ist mein Code.

.type1 { 
 
     position: absolute; 
 
     width: 600px; 
 
     height: 600px; 
 
     left: -100px; 
 
     top: 280px; 
 
     background: yellow; 
 
     bottom: 0; 
 
     border-radius: 50%; 
 
    } 
 
    .text{ 
 
      margin-left: 30%; 
 
     margin-top: 30%; 
 
    }

 <div style='background-image:url("https://i.imgsafe.org/69e56d5ec8.jpg");height: 600px;position:relative;'> 
 
     <div class="circleBase type1"> 
 
      
 
      <h1 class="text"> 
 
      some text inside 
 
      </h1> 
 
     </div> 
 
     </div> 
 
     <div> 
 
     <h1> 
 
     some other text 
 
     </h1> 
 
     </div>

JSFIDDLE

Answer 1

overflow:hidden Bedürfnisse hier verwendet werden soll

Fiddle

Answer 2

Verwenden overflow:hidden wie hier:

Fiddle