Как реализовать нестрандартную форму для слайдера?

Question

[Андрей Sky]

Есть слайдер не совсем стандартной формы. Пробовал реализовать через свойство mask, но поддерживает только браузеры webkit, так же использовал https://github.com/AlmogBaku/imageMask, но тоже не подошел потому что в слайдере используется в одном слайде 2 картинки, к левой картинке маска применятся корректно, к правой прижимается к левой части маски и поэтому не обрезается. Подскажите какие еще есть способы реализовать данный слайдер кроссбраузерно? Плагин для слайдера kenwheeler.github.io/slick

Если можно с примерами, реализации

Comments

[Nikolay Talanov]

SVG Clippath не пробовали?

Answer 1

[hime2]

Если честно, то все очень просто.
Можно сделать маску, из svg или css как вам угодно, поставить z-index, на маску 1, на содержимое 0, к примеру, про позиционирование не забудь.
Слайдер, это тоже самое, что и картинка

Comments

[Андрей Sky]

Svg маска картинкой быть может? Через css у меня только webkit браузеры поддерживали свойства.

[hime2]

svg маска, читайте. Вы про неее ничего не знаете. Нет, поддерживается во всех кроме старых и ie до9-10 точно не помню. Фикс бага это создать картинку и вызывать ее, если браузер говно =)