Fancy SVG box

border.html

<style>
    html, body {
        background-color: #121214;
        color: wheat;
    }
    main {
        display: flex;
        flex-direction: column;
        place-items: start;
    }
    .box {
        border-image: url('Vector.svg');
        /* 
        Whole SVG box
        494x250
        top left
        104x86
        bottom right
        398x152
        */
        border-image-slice: calc(86 / 250 * 100%) calc(398 / 494 * 100%) calc(152 / 250 * 100%) calc(104 / 494 * 100%);
        border-image-width: 86px 398px 152px 104px;
        font-size: 72px;
        padding: 72px 92px;
        color: #cf5211;
    }
</style>
<main>
    <h1>Test border thing</h1>
    <div class="box">12:34:56</div>
</main>

Vector.svg

<svg width="328" height="165" viewBox="0 0 328 165" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_2928_26387)">
<path d="M277.356 101.308C277.696 103.145 276.334 104.859 274.467 104.941L55.4012 114.628C51.7627 114.789 49.3805 110.87 51.1991 107.714L60.919 90.849C61.8074 89.3074 61.7305 87.3925 60.7213 85.9272L51.3239 72.2827C50.2651 70.7453 50.2368 68.7214 51.2522 67.1549L60.9848 52.1417C61.8488 50.809 63.3373 50.0143 64.9253 50.0378L264.637 52.9929C266.836 53.0255 268.706 54.6047 269.106 56.7667L277.356 101.308Z" fill="#212020"/>
<path d="M274.511 105.94C276.984 105.831 278.79 103.56 278.339 101.125L270.09 56.5846C269.602 53.9541 267.327 52.0326 264.652 51.993L64.9401 49.0379C63.008 49.0093 61.1969 49.9763 60.1457 51.5977L50.4131 66.611C49.1776 68.5168 49.212 70.9793 50.5004 72.8499L59.8977 86.4944C60.6882 87.6422 60.7485 89.1422 60.0526 90.3496L50.3327 107.215C48.12 111.054 51.0185 115.823 55.4454 115.628L274.511 105.94Z" stroke="url(#paint0_linear_2928_26387)" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<filter id="filter0_d_2928_26387" x="0.509766" y="0.0390625" width="326.899" height="164.594" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="24"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.39375 0 0 0 0 0.191667 0 0 0 0.24 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2928_26387"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2928_26387" result="shape"/>
</filter>
<linearGradient id="paint0_linear_2928_26387" x1="162.5" y1="50" x2="162.5" y2="115" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF7A00"/>
<stop offset="1" stop-color="#C7481A"/>
</linearGradient>
</defs>
</svg>