Слайдер, почти овальной формы

[npofopr]

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

 

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

 

Подумал сперва, что получится через border-radius, но вышло не много не то: http://jsfiddle.net/npofopr/n3sp9f86/

Тут http://bennettfeely.com/clippy/ вроде тоже плавных углов не сделать.

 

Можно ли через css решить данный вопрос?

 

Или придется использовать canvas или может svg. Если их, то может примеры есть, или какую библиотеку лучше использовать. 

До этого просто не сталкивался) 

 

[Sergik+]

Попробуйте это http://snapsvg.io/demos/#display , у самого все руки чешутся )))

[npofopr]

Попробуйте это http://snapsvg.io/demos/#display , у самого все руки чешутся )))

только я пока что не понимаю, как при этом слайдер оставить рабочим...
Допустим блок такой формы я сделаю, это внутрь него, получается надо слайдер еще.

Не могу я пока сообразить как оно всё будет.  

[Sergik+]

 

Попробуйте это http://snapsvg.io/demos/#display , у самого все руки чешутся )))

только я пока что не понимаю, как при этом слайдер оставить рабочим...

Допустим блок такой формы я сделаю, это внутрь него, получается надо слайдер еще.

Не могу я пока сообразить как оно всё будет.  

 

svg присваиваете класс и задвигаете z-index-ом, думаю должно получится. Надо пробовать.

Edited November 13, 2014 by Sergik+

[npofopr]

svg присваиваете класс и задвигаете z-index-ом, думаю должно получится. Надо пробовать.

разве это не то же самое будет, если наложить картинку? 

[Sergik+]

 

svg присваиваете класс и задвигаете z-index-ом, думаю должно получится. Надо пробовать.

разве это не то же самое будет, если наложить картинку? 

 

Наверное тоже самое А как по другому ?

[npofopr]

А как по другому ?

я собственно за этим и создал тему. 

[rus]

может как-то через after и before - по правому и левому краю через бордер (ну по типу как треугольники делают, только это будет более тупым треугольником), а уголки закруглить обычным способом - бордер-радиус.

[mrnobody]

Не знаю, подойдет так? Правда у меня не получилось сделать объект правильной формы (((

http://jsbin.com/papuli/1/edit?output

Edited November 13, 2014 by mrnobody

[npofopr]

Не знаю, подойдет так? Правда у меня не получилось сделать объект правильной формы (((

http://jsbin.com/papuli/1/edit?output

Вроде как подойдет. 

Надо только как-то нарисовать такую "маску") Онлайн генераторов случайно нет никаких по таким вещам?)

С адаптивностью еще подумать, но вроде не должно быть с ней проблем.

 

Спасибо, буду пробовать как-то рисовать)

 

В IE11 только почему-то картинка не подгружается. А в IE это будет просто прямоугольная картинка? Или не известно.

[Sensei]

Такая фигура сойдет? http://jsfiddle.net/d34wbgdv/

[npofopr]

Такая фигура сойдет? http://jsfiddle.net/d34wbgdv/

Круто) Буду пробовать накладывать. 

Потом выложу результат.

 

 

Но идеи для решения задачи все равно еще принимаются) Может еще как то можно.

Хотя наверно svg и canvas единственное, чем можно.

[npofopr]

Нашел, кстати, еще онлайн генератор http://cssplant.com/clip-path-generator

 

А получилось вот так http://jsfiddle.net/npofopr/n3sp9f86/4/

 

Только теперь еще вопрос, как можно на маску тень добавить?

.main_slider-item {    -webkit-clip-path: url(http://shadow.perm.ru/test/img/mask-slider.svg);/* Firefox*/clip-path: url(http://shadow.perm.ru/test/img/mask-slider.svg#d);/* iOS support */-webkit-mask: url(http://shadow.perm.ru/test/img/mask-slider.svg);     box-shadow: 20px 20px 10px rgba(0, 0, 0, 1);}

В саму svg тоже пробовал, только не выходит. 

На картинке в первом посту тень видна.