JSFiddle - React, Tailwind, and code Playground

HTML

<div class="someText" >
    this text is partially visible;<br/>
    this text is partially visible;<br/>
    this text is partially visible;<br/>
    this text is partially visible;<br/>
    this text is partially visible;<br/>
</div>
<div class="underneathContainer">    
    <div class="cutout">Hello cut out div</div>
</div>

CSS

.someText{    
    background: green;
    position: absolute;
    z-index: 0;    
    top: 0;
}


.underneathContainer{
    margin: 20px;
    width: 260px;
    height: 260px;
    background: rgba(0,0,0,0);    
    overflow: hidden;
}

.cutout{    
    width: 200px;
    height: 200px;    
    background: silver;
    padding: 30px;    
    position: relative;
    z-index: 1;
    border-top-left-radius:30%;    
}
.cutout:before{    
    content: '';
    position: absolute;
    top: -44px;
    left: -30px;
    border-width: 60px 60px 60px 60px;
    border-style: solid;
    border-color: rgba(0,0,0,0) silver silver rgba(0,0,0,0);
    z-index: -1;
}