JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
        <div class="box-frame">
            Рабочий эскиз
        </div>
    </div>

CSS

body { margin: 30px; }
        .box {
            background: #e2e2e2;
            padding: 10px;
            border: 1px solid #000;
            position: relative;
        }
        .box:before,
        .box:after {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            width: 19px;
            height: 19px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
        }
        .box:after {
            left: auto;
            right: -20px;
            border-right: 0;
            border-left: 1px solid #000;
        }
        .box-frame:after,
        .box-frame:before {
            content: '';
            position: absolute;
            bottom: -20px;
            left: -20px;
            width: 19px;
            height: 19px;
            border-right: 1px solid #000;
            border-top: 1px solid #000;
        }
        .box-frame:after {
            left: auto;
            right: -20px;
            border-right: 0;
            border-left: 1px solid #000;
        }