Как сделать рамку в виде продолжения цифры?

Question

[tgarl]

Пришел макет и там блоки идут в рамках, а рамки это продолжение цифр.

Как такие верстать?

Answer 1

[Ankhena]

Как-то так https://codepen.io/AnnaSummer/pen/wvEJbbq

Comments

[Stalker_RED]

А не будет косяков с line-height в разных системах/шрифтах/осях?

[Ankhena]

Stalker_RED, скорее будет, чем нет. Но они корректируются, как обычно.

[tgarl]

Спасибо, круто.
А если нужно также, но цифра за пределами рамки?

[tgarl]

или чтобы текст обтекал цифру?

[Ankhena]

tgarl, тогда придумывают что-нибудь похожее.

Answer 2

[VoidVolker]

Самый простой и логичный вариант: конвертировать цифры в заданном шрифте в SVG в нужном стиле с заданным фоном в самой цифре. Далее делаем рамку контейнеру с контентом, при этом цифру просто смещаем на толщину линии относительно нужной границы, чтобы часть рамки цифры выходила за границу родительского контейнера и была не видна.

Answer 3

[Полина Емельянова]

Как вариант, если без магии с СВГ и прочими:
У блока с цифрой сделать выноску на ПСЕВДОЭЛЕМЕНТЕ и разместить ее ПОВЕРХ бордера.

&:before {
   content: "";
   position: absolute;
   top: 100%;
   left: сколько надо;
   height: 10px или сколько надо;
   width: 20px или сколько надо;
   background-color: #fff; // и это самое узкое место, т.к. измениться фон - будет видена эта выноска
   z-index: 2;
  }