Как реализовать блок такой формы?

Question

[Андрей Sky]

Как реализовать данный слайдер? свойства clip-path, mask, mask-image не подходят. Они поддерживаются только webkit бразуерами. Нужна поддержка firefox, webkit, safari ios, ie 11, 10.
Форма блока:

P.S. Желательно с примерами.

Answer 1

[Дмитрий Антонов]

Что бы точно как ты хочешь то тогда SVG border-radius думаю сложно будет добиться jsfiddle.net/ppgjuzcc

Answer 2

[Денис Инешин]

SVG-masks. Вполне кроссбраузерно.

Но я бы так не заморачивался. Пальмы сверху вырежьте как png с прозрачностью, вот уже и маски не нужны.

Answer 3

[Андрей Гончаров]

можно поиграть с border-top-left-radius: Xpx/Ypx и border-top-right-radius: Xpx/Ypx

Comments

[Андрей Sky]

Андрей Гончаров border radius тоже мимо, угол скругления не тот.

[Андрей Гончаров]

border-top-left-radius: 50% 70px;
border-top-right-radius: 50% 70px;

[Сергей Сергей]

Андрей Sky: а если скрыть бока с "не тем углом"-радиусом изгиба, оверфлоу:хидден, все дела?

[Андрей Гончаров]

вроде должно норм работать, только числа свои чуть подыграй

[Александр Евгеньевич]

Игруны XD