JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="test"><div id="fill"></div>
    <div id="fill2"></div></div>
</div>

CSS

BODY{
    background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px;
}

#wrapper {
    overflow: hidden;
    height: 116px;
}
#fill{
    height: 40px;
    position:absolute;
    width:30px;
    left:-30px;
    background: #ccc;
}
#fill2{
    height: 40px;
    position:absolute;
    width:30px;
    background: #ccc;
    bottom:0;
    left:-30px;
}
#test {
    height: 116px;
    width: 692px;
    background-color: #ccc;
    position: relative;
    float:right;
}
#test:before {
    content:"";
    position: absolute;
    top: 40px;
    height: 50%;
    width: 30px;
    left: 0;
    background-color: #ccc;
    -webkit-transform: skew(40deg);
    -moz-transform: skew(40deg);
    -o-transform: skew(40deg);
    -ms-transform: skew(40deg);
    transform: skew(40deg);
}
#test:after {
    content:"";
    position: absolute;
    bottom: 40px;
    height: 50%;
    width: 30px;
    left: 0;
    background-color: #ccc;
    -webkit-transform: skew(-40deg);
    -moz-transform: skew(-40deg);
    -o-transform: skew(-40deg);
    -ms-transform: skew(-40deg);
    transform: skew(-40deg);
}