JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<div class="mask">
    <img src="https://source.unsplash.com/random/400x400" alt="">
</div>

SCSS

@mixin clip-path-border(
    $border-width:  1px,
    $top-left:      (0%, 0%),
    $top-right:     (0%, 0%),
    $bottom-right:  (0%, 0%),
    $bottom-left:   (0%, 0%)
) {

    clip-path: polygon(
        /*  1 */    calc(#{nth($top-left, 1)}) calc(#{nth($top-left, 2)}),
        /*  2 */    calc(#{nth($bottom-left, 1)}) calc(100% - #{nth($bottom-left, 2)}),
        /*  3 */    calc(#{nth($bottom-left, 1)} + #{$border-width}) calc(100% - #{nth($bottom-left, 2)} - #{$border-width}),
        /*  4 */    calc(#{nth($top-left, 1)} + #{$border-width}) calc(#{nth($top-left, 2)} + #{$border-width}),
        /*  5 */    calc(100% - #{nth($top-right, 1)} - #{$border-width}) calc(#{nth($top-right, 2)} + #{$border-width}),
        /*  6 */    calc(100% - #{nth($bottom-right, 1)} - #{$border-width}) calc(100% - #{nth($bottom-right, 2)} - #{$border-width}),
        /*  7 */    calc(#{nth($bottom-left, 1)} + #{$border-width}) calc(100% - #{nth($bottom-left, 2)} - #{$border-width}),
        /*  8 */    calc(#{nth($bottom-left, 1)}) calc(100% - #{nth($bottom-left, 2)}),
        /*  9 */    calc(100% - #{nth($bottom-right, 1)}) calc(100% - #{nth($bottom-right, 2)}),
        /* 10 */    calc(100% - #{nth($top-right, 1)}) #{nth($top-right, 2)}
    );
}

body {
    background: rebeccapurple;
}

img {
    max-width: 100%;
    height: auto;
}

.mask {
    position: relative;

    > * {
        clip-path: polygon(5% 0, 95% 5%, 100% 95%, 0% 100%);
        position: relative;
        z-index: 5;
    }
}