Доброго времени суток! Нужно реализовать сложную задумку. Нужно как на картинке засунуть текст в рамку снизу и сделать саму рамку загнутой, заранее спасибо за помощь.
Сергей: Как в задании было указано, так и сделал. Если пошло на то дело, то я в любой верстке могу с десяток способов найти, как поломать ее или сделать некорректной, поэтому тут нужно либо конкретизировать, либо просчитывать все варианты.
Если такой вариант не устраивает, то делаем блоку границу сверху, справа и слева. Затем задаем определенный процент тексту (который находится на границе), а оставшиеся проценты задаем блоку через after и before, где и добиваем нужную рамку.
Сергей: Что-то вроде такого: https://jsfiddle.net/lokdmt/8pa675oL/3/
Вариант, конечно, далек от совершенства, т.к. если изменить надписи (длину), то все поедет, но для этого есть calc(), чтобы можно было все корректно просчитать. А самому блоку поменять padding, т.к. в данный момент немного кривовато и задать overflow: hidden, чтобы границы в случае перебора не вылазили, и на этом всё.
Опять таки, показал это, чтобы направить в нужное русло, дальше можно (и даже нужно), доработать самому.
Дмитрий Локшин: обернуть нижнюю надпись в блок с owerflow:hidden width 100%
псевдо элементы сделать длинными. тогда не будет привязки к длине надписи.
а так в целом хорошо =)
Сергей: Я про это выше и написал)
Только width задать не 100% а меньше, например так: width: calc(100% - 30px). 30px это общая ширина границы (справа и слева), т.к. если этого не сделать, то будет заметно, т.к. у главного блока границы закруглены (border-radius: 15px ).
Сложность возникнет только при адаптивности этого элемента. Почему не картинка? Очень сомневаюсь в семантике подписи если основная надпись логотип картинка
Средний
