html - 从底部删除圆形 div 的一部分

Question

我正在处理一些 css 形状，并制作了一个圆形 div。我有一些特定的设计要求，其中规定圆形 div 的上半部分应该是可见的，并且应该与 div 的底部对齐。应该隐藏下半部分(底部以下)。

问题我想去掉圆形div的下半部分。它在下一个 div 中重叠。

我尝试了 z-index 但仍然有进步 这是我的代码。

    .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这里需要用到

Fiddle