Element div o niestandardowych kształtach

Witam
Potrzebuję na stronie stworzyć mniej więcej taki kształt: 

sprawa byłaby dość prosta z svg albo canvas ale problem w tym, że ten element ma działać jak div z wyciętą dziurą w środku gdzie ten kształt będzie transparentny natomiast cała reszta ma być pół-transparentna. Mówiąc inaczej tło obrazka widziane w tym kształcie ma być w pełnych kolorach a cała reszta z nałożonym filtrem. Da się w ogóle zrobić coś takiego?

Witam
Potrzebuję na stronie stworzyć mniej więcej taki kształt: 
sprawa byłaby dość prosta z svg albo canvas ale problem w tym, że ten element ma działać jak div z wyciętą dziurą w środku gdzie ten kształt będzie transparentny natomiast cała reszta ma być pół-transparentna. Mówiąc inaczej tło obrazka widziane w tym kształcie ma być w pełnych kolorach a cała reszta z nałożonym filtrem. Da się w ogóle zrobić coś takiego?

Hmmm... Wszystko zalezy od filtra. Mozesz miec normalne, prostokatne zdjecie i na to zdjecie nalozyc absolutami 3 trojkaty polprzezroczyste, czy jakie tam chcesz. Za pomoca jakis afterow i borderow, cos by pewnie wykombinowal. Czyli troche inne podejscie do tematu. Ze olewasz ten 1 ksztalt, ale bierzesz pod uwage te pozsotale ksztalty, gdzie zdjecie jest przykryte

Hmm też jakieś podejście ale wygląda na pracochłonne. Ciekawe czy to jedyny sposób na osiągnięcie tego efektu. 
Zastanawiałem się też nad narysowaniem ścieżki svg zostawiającej taką "dziurę" w środku. Ciekawe czy to zadziała.

Edited by przemoo83, 31 August 2015 - 11:29 .

Hmm też jakieś podejście ale wygląda na pracochłonne. Ciekawe czy to jedyny sposób na osiągnięcie tego efektu. 
Zastanawiałem się też nad narysowaniem ścieżki svg zostawiającej taką "dziurę" w środku. Ciekawe czy to zadziała.

Zadziała. Nakładasz przed obrazek afterem, ktoremu jako tlo dajesz to SVG. Powinno smigac. Zdjecie relatywne, after absolutny.

Chyba najprostsze rozwiązanie.

Pierwej pokombinowałbym nieco z transformacjami css.

Na zasadzie dwóch trójkątów z odpowiednio ustawionym obrazkowym tłem.

Czy dany niestandardowy kształt ma być klikalny, lub coś w tym rodzaju? Bo jeśli nie to chyba nie widzę sensu kombinowania i dałbym po prostu grafikę png z wyciętym kształtem jako maskę dla DIV'a.

Czy dany niestandardowy kształt ma być klikalny, lub coś w tym rodzaju? Bo jeśli nie to chyba nie widzę sensu kombinowania i dałbym po prostu grafikę png z wyciętym kształtem jako maskę dla DIV'a.

Wagowo nie będzie słabo? 

Czy dany niestandardowy kształt ma być klikalny, lub coś w tym rodzaju? Bo jeśli nie to chyba nie widzę sensu kombinowania i dałbym po prostu grafikę png z wyciętym kształtem jako maskę dla DIV'a.

Nie musi być klikalny ale idea była taka, żeby się poruszał niezależnie od tła na zasadzie paralaksy. Nie wiem czy takie coś jest możliwe. Najsensowniejsze co znalazłem to przykład tutaj. http://codepen.io/yoksel/pen/fsdbu

Jak sobie najedziecie na ten pierwszy przykład od góry to ma to tak wyglądać z tym, że oczywiście nie zwykły kwadrat ale ten dziwny kształt zamiast tego. Jakby się dało te dwie warstwy odseparować żeby tło się przesuwało jak slider a ta maska pozostawała to by już w ogóle było bajecznie.

super