Подскажите как сверстать данный элемент

[AlexZaw]

Тут есть тени, градиент, закругленные углы, и выпуклая верхняя часть.
С тенями, градиентом, и нижней частью проблем нет, но вот как реализовать верхнюю часть - ума не приложу.
border-radius c параметрами через "/" не дает резкого закругления по краям, псевдоэлементами придется подгонять диагональный градиент, что при адаптации создаст кучу гемороя. Картинкой сделать нельзя так как содержимое может меняться. Есть какое-то менее болезненное решение чем через псевдоэлементы?

[npofopr]

Модное ныне svg?  

[Tilonorrinco]

AlexZaw, а фон, на котором находится элемент -- однотонный и неизменяемый?

Если да, то можно просто поверх обычного загругленного дива с градиентом псевдоэлементом положить что-то типа маски. Верхняя часть маски -- однотонная (под цвет фона), а нижняя -- прозрачная (чтобы было видно градиент).

Не знаю, удалось ли понятно объяснить  

[AlexZaw]

Ну  если поизвращаться  можно и на svg нарисовать, вот только это совсем не проще мне кажется, да и как быть если содержимого станет больше, каждый раз перерисовывать? Или как то все это дело масштабируется? С svg мало знаком просто. 

6 минут назад, Tilonorrinco сказал:

AlexZaw, а фон, на котором находится элемент -- однотонный и неизменяемый?

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

[vladmih]

Делать блок, заливать его цветом, одним псевдоэлементом делать верхушку, а вторым поверх делать репит градиент

Edited October 25, 2017 by vladmih

[AlexZaw]

Вторым элементом делать градиент поверх не получится, так как градиент будет наложен поверх границ основного блока. В принципе для данной задачи сделал выпуклую крышку вторым блоком и залил оба блока градиентом. Получилось нормально, переломов никаких не видать, все масштабируется. Попутно, в целях саморазвития так сказать,  возник вопрос, как сделать такой элемент если вместо заливки цветом и градиента на фоне будет фотография или любое другое не повторяющееся изображение.

[SelenIT]

Я бы нарисовал в SVG и наложил как border-image.