Как можно сделать разривистую рамку с середины блока?

Question

[nikita_chiru]

вот такую

Answer 1

[Иван]

https://codepen.io/Zzor/pen/owgqaG

Answer 2

[Андрей Федоров]

<fieldset>
  <legend>Текст</legend>
</fieldset>

Comments

[Negwereth]

А если это не форма?

[Андрей Федоров]

А где тут что-то про форму? Это совершенно отдельные теги семантически не связанные с формами.

[Миша]

Андрей Федоров: в спецификации написано, что тег fieldset для группировки элементов форм. Ссылка на спецификацию.

[Андрей Федоров]

Миша: Да, тогда я пожалуй не прав на счет семантической связи, но в целом ведь никто не запрещает использовать fieldset отдельно.

Answer 3

[Миша]

Если фон страницы однотонный, то можно сделать так.

Разметка такая:

<a href="#" class="btn">
  <span class="top">menu</span>
</a>

Основные стили такие:

.top {
  position: relative;
  display: inline-block;
  top: -.45em;
}

При этом фоны a.btn и span.top должны быть такими же, как фон элемента под ними.

После можно стилизовать как душе угодно.
Демо на codepen