JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<img src="http://s00.yaplakal.com/pics/pics_original/5/1/8/5047815.jpg" alt="" />
<div></div>

CSS

div { position: absolute; left: 300px; top: 100px; }
div:before { position: absolute; content: ""; left: 0; top: 0; background: red; width: 1px; height: 50px;
    -webkit-transform: skewX(-18deg);
       -moz-transform: skewX(-18deg);
        -ms-transform: skewX(-18deg);
         -o-transform: skewX(-18deg);
            transform: skewX(-18deg); }
div:after  { position: absolute; content: ""; left: 0; top: -50px; background: red; width: 1px; height: 50px;
    -webkit-transform: skewX(18deg);
       -moz-transform: skewX(18deg);
        -ms-transform: skewX(18deg);
         -o-transform: skewX(18deg);
            transform: skewX(18deg); }