Как сделать искривленный border-radius внутрь с четырёх сторон?

Question

[Kakagawa]

Как реализовать вот такой изогнутый бордер? Судя по картинке их тут два - ровный и сверху изогнутый. Перелопатил гайды и генераторы, но не пойму как это реализовано. Нужно мнение экспертов

Comments

[Alex Karo]

Ровных тут нет - оба кривые.
Бордером это, по-моему, не реализовать.
Взять SVG, если макет позволяет?

Answer 1

[reivunxx]

Оба бордера произвольной формы, и желтый и черный, присмотритесь
Самый простой вариант - отрисовать в svg и кидать как фон

Comments

[Kakagawa]

А если мне надо универсальный бордер для нескольких блоков? Отрисовывать под каждый блок отдельный свг?

[Kakagawa]

Попробовал накинуть фоном. Получилось замостить через background-size: contain и no-repeat. Получается, что надо отрисовывать по максимальным размерам в свг и потом замащивать на каждый блок? Но всё же интересно, можно ли это как-то CSSом реализовать?)

[reivunxx]

Kakagawa, ну мне на ум приходит только разбить такой бордер на 3 части по вертикали - верхнюю полосу, две вертикальные полосы и нижнюю. Верх и низ сделать через :before и :after, а вертикальные полосы через img и дать просто высоту 100% минус высота верха и низа. Потом это все обернуть в div и через position absolute подложить под контент.
Начнет увеличиваться контент - начнут растягиваться вертикальные боковые полосы, для свг это не проблема

Answer 2

[profesor08]

Как сделать искривленный border-radius внутрь с четырёх сторон?

border-radius - скругление углов. Скруглять в внутрь - нельзя.

Чтоб реализовать то, что на картинке, используй svg картинку в качестве фона и растяни на весь блок.