JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div>Lorem ipsum</div>
</div>

CSS

body{
    background: url('http://www.zeppelin.ru/i/main_back.png');
}
.outer{
    overflow:hidden;
    height: 60px;
    margin: 20px;
    border-bottom: 5px solid #ffc81f;
    position: relative;
    text-align:center;
    color: white;
}

.outer:before,.outer:after{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    content: " ";
    background: #000;
    border-radius: 20px;
    min-height: 160px;
}

.outer:before{
transform: skew(0deg, -2deg) translate(0px, 18px);
-webkit-transform: skew(0deg, -2deg)  translate(0px, 18px);
}


.outer:after{
transform: skew(0deg, 2deg) translate(0px, 18px);
-webkit-transform: skew(0deg, 2deg)  translate(0px, 18px);
}

.outer div{
    color:white;
    position:absolute;
    width: 100%;
    top:20px;
    z-index:10;
    font: 24px/30px 'Arial',sans-serif;
    font-weight: bold;
}