Как засунуть текст в border-bottom?

Question

[Иван Смирнов]

Доброго времени суток! Нужно реализовать сложную задумку. Нужно как на картинке засунуть текст в рамку снизу и сделать саму рамку загнутой, заранее спасибо за помощь.

Comments

[Ярослав Иванов]

А зачем такие вещи на css делать ? этож лого. Делается все в иллюстраторе.

[Сергей delphinpro]

Если это логотип - то правильнее будет svg картинку вставить

Answer 1

[Дмитрий Локшин]

По быстрому реализовал https://jsfiddle.net/lokdmt/8pa675oL/
Дальше, думаю, уже сможете сами подправить что нужно, т.к. основной принцип показал.

Comments

[Сергей delphinpro]

Простейший тест не пройден https://jsfiddle.net/8pa675oL/1/
Вернуть на доработку.

[Дмитрий Локшин]

Сергей: Как в задании было указано, так и сделал. Если пошло на то дело, то я в любой верстке могу с десяток способов найти, как поломать ее или сделать некорректной, поэтому тут нужно либо конкретизировать, либо просчитывать все варианты.
Если такой вариант не устраивает, то делаем блоку границу сверху, справа и слева. Затем задаем определенный процент тексту (который находится на границе), а оставшиеся проценты задаем блоку через after и before, где и добиваем нужную рамку.

[Дмитрий Локшин]

Сергей: Что-то вроде такого: https://jsfiddle.net/lokdmt/8pa675oL/3/
Вариант, конечно, далек от совершенства, т.к. если изменить надписи (длину), то все поедет, но для этого есть calc(), чтобы можно было все корректно просчитать. А самому блоку поменять padding, т.к. в данный момент немного кривовато и задать overflow: hidden, чтобы границы в случае перебора не вылазили, и на этом всё.
Опять таки, показал это, чтобы направить в нужное русло, дальше можно (и даже нужно), доработать самому.

[Сергей delphinpro]

Дмитрий Локшин: обернуть нижнюю надпись в блок с owerflow:hidden width 100%
псевдо элементы сделать длинными. тогда не будет привязки к длине надписи.
а так в целом хорошо =)

[Дмитрий Локшин]

Сергей: Я про это выше и написал)
Только width задать не 100% а меньше, например так: width: calc(100% - 30px). 30px это общая ширина границы (справа и слева), т.к. если этого не сделать, то будет заметно, т.к. у главного блока границы закруглены (border-radius: 15px ).

[Дмитрий Локшин]

Так что после небольшого холивара задача оказалась полностью решенной.

Answer 2

[NikolayAlb]

::after + position: absolute + background: white

Answer 3

[Андрей Б.]

так сложно аж призадумался https://jsfiddle.net/kfkLkrpL/

Comments

[Stanislav]

У меня аж Гугл транслейт потёк

img

[Иван Смирнов]

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

Answer 4

[Артур Карапетян]

Можно попробовать сделать это ::after-ом.

Answer 5

[Froggyweb]

Сложность возникнет только при адаптивности этого элемента. Почему не картинка? Очень сомневаюсь в семантике подписи если основная надпись логотип картинка