JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<ul>
    <li class="object">Каталог</li>
    <li class="botline"></li>
    <li class="topline"></li>
    <li class="crossline"></li>
</ul>

CSS

ul
        {
            position: absolute; 
            top: 50%; left: 50%;
        }
li
        {
            position: absolute;
            display: block;
            transform: translate(-50%, -50%);
        }
.object
        {
            width: 200px;
            height: 40px;
            background: #35d;
            font: 18px Arial Helvetica sans-serif;
            color: white;
            text-align: center; /*центрирую текст, эта и след строчка*/
            line-height: 40px;
            box-sizing: border-box;
            border-top: 1px dotted white;
            border-left: 1px dotted white;
            box-shadow: -4px -4px 0 4px #35d;            
        }
.botline
        {
            bottom: -24px;
            left: -64px; 
            border-left: 4px solid #FFF;
            border-bottom: 4px solid #FFF;
            border-top: 4px solid #35d;
            border-right: 4px solid #35d;
        }
.topline
        {
            top: -24px;
            right: -104px;
            border-left: 4px solid #35d;
            border-bottom: 4px solid #35d;
            border-top: 4px solid #fff;
            border-right: 4px solid #fff;         
        }
.crossline
        {
            top: -24px;
            left: -64px;
            width: 8px;
            height: 8px;
            background: linear-gradient(45deg, transparent 49%, white 49%, white 51%, transparent 51%);
        }