JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay"></div>
<div class="content"></div>

CSS

.content{
    width:400px;
    background:#ccc;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    margin-left:-200px;
}

.overlay{
    background:yellow;
    position:absolute;
    width:440px;
    height:100px;
    left:50%;
    margin-left:-220px;
    z-index:1;
}

.overlay:before{
    content:" ";
    position:absolute;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent #333 transparent transparent;
    top:100px;
}

.overlay:after{
    content:" ";
    position:absolute;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #333 transparent transparent transparent;
    top:100px;
    right:0;
}