Как сделать border-radius для тэга figure?

Question

[tugens]

Всем привет. Подскажите как решить такую проблему. Есть верстка с тэгом figure и картинкой внутри. Сам блок должен быть на 100% ширины родителя. Как сделать border-radius у этого блока (с синим background). Получается сделать radius только сверху. Саму верстку менять нельзя

Comments

[Максим]

Радиальный градиент наложить..
А почему незя вёрстку менять?
Не умеете потому что?

[tugens]

Максим, потому что блок тянется из админки из скэдитора и в старых компонентах верстка останется старой

[Максим]

tugens, ясно... ну тогда радиальный градиент наложить

Answer 1

[Сергей delphinpro]

можно имитировать внутренние скругления двумя псевдоэлементами.

Comments

[tugens]

спасибо, тоже думал об этом, но спросил тут тк думал может есть способ проще )

[Сергей delphinpro]

tugens, ну как вариант, фон и радиус можно задать самой картинке, плюс object-fit:contain. Правда тогда маленькие картинки увеличатся.

[tugens]

Сергей delphinpro, пока вариант с псевдоэлеменатми лучше всего подходит, тк нельзя чтоб размеры менялись

Answer 2

[Александр Талалаев]

Для figure - position: relative, для figcaption position: absolute;
А дальше уже под себя настраиваете. Как отправная точно пойдёт.

Comments

[Ankhena]

Только переполнение перестанет работать.
Если текста станет больше, он просто заедет на другие блоки и сломает верстку.

[Александр Талалаев]

Ankhena, конечно. Я поэтому отметил, что это только начало пути. Впрочем, тут такое место, что высокий шанс что можно задать жесткий размер подписи, ну и отодвинуть там ниже соответственно.

[tugens]

Александр Талалаев, ну тут и подпись и картинка может быть любого размера и длинны по сути + еще стили под мобилку

[Александр Талалаев]

tugens, с картинкой и мобилкой проблем не будет. А вот с любой длинной подписи, с моим решением без допов, будет.