JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

body {
    font-size: 10px;
}
div {
    background: url('https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg');
    height: 33.3em;
    width: 50em;
    position: relative;
    overflow: hidden;
    box-shadow: inset 2em 0 0 0 rgba(255, 255, 255, 0.6);
}
div:before, div:after {
    content:"";
    position: absolute;
    left: 2em;
    background-color: rgba(255, 255, 255, 0.6);
    height: 25em;
    width: 2em;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}
div:before {
    bottom: -8.35em;
    -webkit-transform: skewY(45deg);
    -moz-transform: skewY(45deg);
    -ms-transform: skewY(45deg);
    transform: skewY(45deg);
}
div:after {
    top: -8.35em;
    -webkit-transform: skewY(-45deg);
    -moz-transform: skewY(-45deg);
    -ms-transform: skewY(-45deg);
    transform: skewY(-45deg);
}