JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="rect"></div>
    <div id="a">    
    </div>  
    <div id="b">
    </div>
</div>

CSS

#wrapper{
    position:relative;
    width:312px;
    height:313px;
    background:url(http://i.stack.imgur.com/pZVTb.png);
    background-attachment: fixed;
}
#a{
    position:absolute;
    right:0;
    height:120px;
    top:100px;
    border-top-left-radius:60px;
    border-bottom-left-radius:60px;
    width:60px;
    background:url(http://i.stack.imgur.com/pZVTb.png);
    background-attachment: fixed;}
#b{
    position:absolute;
    left:0;
    height:120px;
    top:100px;
    border-top-right-radius:60px;
    border-bottom-right-radius:60px;
    width:60px;
    background:url(http://i.stack.imgur.com/pZVTb.png);
    background-attachment: fixed;
} 
#rect{
    width:100%;
    height:56%;
    position:absolute;
    top:65px;
    background:rgba(120,0,23,.8);
}