<svg
width="128px" height="128px"
viewBox="0 0 128 128"
xmlns="http://www.w3.org/2000/svg">
<!-- ломаная линия с красной обводкой толщиной 6px -->
<!-- в координатах отступаем от края по 3px -->
<!-- (по половине толщины обводки) -->
<!-- комментарии надо будет удалить -->
<polyline points='125,64
125,125
3,125
3,3
125,3
125,32'
fill='none' stroke='#cc0033' stroke-width='6'/>
</svg>
<div>Потом SVG экранируем с помощью https://yoksel.github.io/url-encoder/</div>
<span>ГЛАВНАЯ</span> <span>второстепенная</span>
svg {
/* чтобы было видно границы svg */
background: silver;
}
span {
display: inline-block;
padding: 16px;
border: 6px solid #cc0033; /* for IE 10 and older */
/* и добавляем в border-image */
border-image: url("data:image/svg+xml,%3Csvg width='128px' height='128px' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='125,64 125,125 3,125 3,3 125,3 125,32' fill='none' stroke='%23cc0033' stroke-width='6'/%3E%3C/svg%3E") 6;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.