Cześć,
Chcę zrobić z tego slider. Problem polega w tym, że fotki które będę wstawiał do niego nie będą ścięte tak jak na tym obrazku, a będą w całości - jak normalne zdjęcia.
Macie jakiś pomysł jak rozwiązać ten problem w CSS aby działało w każdej przeglądarce? A może jest gotowy jakiś przykład - wtedy nie trzeba będzie tworzyć koła na nowo.
Ten przykład jest z photoshopa:
Proszę o pomoc.
Nie da rady, a jak już da to tylko i wyłącznie w canvas (zapomnij o wsparciu dla starszych przeglądarek)
Div jest kwadratem, albo będziesz wstawiać zdjęcia ucięte (z przeźroczystością), albo przerobisz je w php(z jednego zdjęcia robisz 3, jedno ucięte z jednej strony, drugie z drugiej, a trzecie po kliknięciu)
prostokątem 
Wiem że o tym wiesz, wiem że się czepiam.
A ja myślę, że to się da zrobić. 
Na przykładzie lewego obrazka: trzeba podzielić tę lewą część na kilka (kilkanaście) wierszy, w których będzie się znajdował kolejny fragment obrazka. Liczba wierszy zależeć będzie od ukośnego odstępu między oboma obrazkami (po prostu prawy brzeg obrazka będzie maskowany “ząbkowanymi” fragmentami IMG, które będą z lewej strony miały przezroczysty trójkątny fragment). Kolejne wiersze zawierające obrazek trzeba pozycjonować przez CSS.
Coś w tym stylu:
Przykład takiego pozycjonowania i wyświetlania obciętego fragmentu obrazka można zobaczyć u mnie:
Paski narzędziowe: http://programistrz.pl/projekty/toolbars/
Jeden obrazek rozbity na 3 niezależne kawałki: http://programistrz.pl/ciekawostki/przeplot/
Oczywiście powyższe przykłady nijak się mają do tego obrazka, chodzi mi tylko o pokazanie jak wyświetlać w danym ograniczonym obszarze pewien fragment grafiki.
Bardzo dobry pomysł =D>
Możesz tez pobawić się w układanie jednego obrazka na drugim - jak warstwy w programie graficznym i na samochody nałożyć obrazki, które są przezroczyste w środku, tam, gdzie ma być widać zdjęcia.
@slepciu: Widzisz, to właśnie nie jest możliwe z powodu tego, że obrazki są przedzielone ukośnie - wtedy część jednego z nich zasłoniłby część drugiego (naszła na jego fragment). Problem jest w zachodzeniu na siebie w pionie.
@1q2w3e4r, jeśli nie zależałoby Tobie na obramowaniu jak w przykładzie, to możesz zastosować taki trik (jeśli działa na IE9 i Fx, to powinno zadziałać również na reszcie -w miarę nowych- przeglądarek ;)).
Ewentualnie możesz zobaczyć jeszcze interaktywny przykład (opis wykonania), podobny z wyglądu do powyższego.
Nie żebym się czepiał, ale:
pierwsze rozwiązanie dotyczy się obrazków, które na siebie nie zachodzą;
drugie rozwiązanie bazuje na CSS3, a więc nie zadziała w Internet Explorerze 8.
Dziękuję wszystkim za propozycje.
Gdyby ktoś znał jeszcze inne sposoby wykonania tego zadania chętnie je zobaczę.