JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<div id="pic"></div>

CSS

#pic {
    width: 300px;
    height: 300px;
    background: url("http://placekitten.com/300/300");
    position: relative;
}
#pic:before, #pic:after {
    content: "";
    display: block;
    position: absolute; 
    left: 0;
    height: 0;
    width: 100%;
    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
#pic:before {
     top: 0; 
     border-bottom: 20px solid transparent;  
}
#pic:after {
    bottom: 0;
    border-top: 20px solid transparent; 
}