JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background">
    <div id="papa">
        <div id="hijo" class="hole">
        </div>
    </div>
</div>

CSS

/*I've added this for this example only */
#background{background: red;}

/* PARENT DIV */
#papa{position:relative; width:80%;margin:0 auto;height:50%;
    /*This is the important part for the parent */
    background:transparent;overflow:hidden;
}

/* CHILD DIV */
#hijo{position: absolute; z-index:0; top:0; right:0;width:100px; height:100px; 
    
    /*Gandalf comes in. This is what you need.*/
    background: transparent;
    border-top:40px solid yellow;
    border-right:40px solid yellow;
    border-left:900px solid yellow;
    border-bottom:900px solid yellow;
}