Как сверстать такой блок?

Question

[kschingiz]

Добры день, подскажите пожалуйста как сверстать такой border?


пробовал:
1) Дорисовать по высоте и поставить как background-image, но.. контент блока может меняться, и при увеличении размера, текст вылазиет за пределы картинки.
Думаю решение может быть таковым:
поставить блоку:
border-top: 10px solid #FFF;
Внутрь блока поставить картинку в котором будет эта картинка Лайка, центрировать его и поставить margin-top:-50px, например.

Но наверное есть более грамотное решение?

Answer 1

[Евгений Петров]

codepen.io/cleric/pen/IFiok

Comments

[kschingiz]

блииин спасибо огроменное =)

Answer 2

[Евгений Низамиев]

<fieldset>
<legend>mgck</legend>
</fieldset>

Кажется это самый лучший способ. стилизуете как надо и всё будет ок.
Вот тут можете посмотреть Как сделать декорацию заголовка подстраиваемую под ширину текста в CSS ?

Comments

[kschingiz]

ух ты, спасибо

Answer 3

[Alexander Mischuk]

Если фон сплошной, то можете вырезать кнопку с фоном и разместить по-центру поверх рамки.
Если нет, то border-top: none, и через after/before добавляйте с фиксированной шириной в абсолютном позиционировании эти полосы.