JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<div class="image-in-frame"></div>

CSS

.image-in-frame {
    width: 300px;
    height: 200px;
    margin: 10% auto;
    color: rgb(248, 248, 248);
    background: linear-gradient(135deg, transparent 20px, currentColor 0, currentColor 30px, transparent 0) top left, linear-gradient(-135deg, transparent 20px, currentColor 0, currentColor 30px, transparent 0) top right, linear-gradient(45deg, transparent 20px, currentColor 0, currentColor 30px, transparent 0) bottom left, linear-gradient(-45deg, transparent 20px, currentColor 0, currentColor 30px, transparent 0) bottom right;
}

.image-in-frame:before {
    content: "";
    background: url(http://lorempixel.com/400/210/animals) no-repeat;
    max-width: 100%;
    height: 200px;
    display: block;
    position: relative;
    z-index: -1;
    border-radius: 5px;
}