Как сделать вырез?

Question

[megazvero]

Comments

[Сергей delphinpro]

https://stackoverflow.com/questions/7731310/text-i...
Там ниже ответ есть "Text in Border with transparent text background"

[megazvero]

Сергей delphinpro, это да
спасибо

но если я убираю элемент <span class="bar">BAR</span>
то некоректно работает
не подскажете, пожалуйста, что еще нужно поправить?
https://jsfiddle.net/8xw23oum/1/

[Сергей delphinpro]

megazvero, нижний бордер добавить вместо нижнего выреза

[megazvero]

Сергей delphinpro, а как сделать чтобы текст не переносился как можно дольше?
https://jsfiddle.net/ahb0tLpw/
увеличение маргинов по бокам не помогает

Answer 1

[Максим]

Для не стандартной ситуации применяем SVG

Comments

[megazvero]

Максим Ленский, а если вырез нужен будет снизу?

Answer 2

[Lord_Dantes]

Если как у вас, то можно псевдо-элементом сделать.

Comments

[megazvero]

s l a v e, контент будет редактироваться с админки

[Lord_Dantes]

megazvero, можно вынести кусочек с свойством "content" CSS в html и редактировать его там или сделать div уже.

Answer 3

[approximate solution]

Сделать большому блокуposition: relative, маленькому блоку -

position: absolute;
top ~3px;
 left: 50%;
transform: translateX(-50%);

и задать маленькому блоку background-color: white, что бы он перекрывал линию большого.

И наполняете контент в оба блока, через кастомные поля, или чем вы там пользуетесь.

Answer 4

[Влад Громов]

Вот пример:
https://jsfiddle.net/kp0bLexq/1/

Comments

[megazvero]

Влад Громов, извиняюсь
не совсем корректный скрин
я убираю у вас бэраунд
и результат не такой
поняли о чем я ?

[Максим]

megazvero, я там ответ написал - специальный тег HTML есть для этого

[Сергей delphinpro]

Максим Ленский, Он не для этого!
fieldset для группировки полей формы.

[Максим]

Сергей delphinpro, обновил ответ

[Влад Громов]

megazvero, https://jsfiddle.net/xb1nm25q/
понял, но бэкграунд надо было ставить под цвет фона