Witam, mam od grafika taką koncepcję:



Chcę to zrobić na podstawie divów (odpowiednia ich transformacja), jednakże zastanawia mnie w jaki sposób to najbezpieczniej wykonać dla bardzo dużych rozdzielczości? Nie chcę, by gdzieś po bokach pojawiły się nieprawidłowości. Czy ktoś już robił podobne rzeczy na stronie i ma na to sposób? Teoretycznie dla rozdzielczosci o szerokosci np. 10 000 powinny powstac trojkaty badz trapezy

No niestety to trochę skomplikowane.
Podam link do tutoriala na dziwne kształty diva:
LINK

Jeśli we wszystkich 3 divach chcesz zawartość to będziesz musiał je nałożyć na siebie i użyć z-index.

"Teoretycznie dla rozdzielczosci o szerokosci np. 10 000 powinny powstac trojkaty badz trapezy "
A to już chyba niemożliwe bo po pewnym czasie powstanie klepsydra.
Nie możesz ustalić szerokości?
(Tak jak na kwejk.pl jest bardzo wąski div z treścią i marginesy po bokach - im większa rozdzielczość tm większe)

A może skorzystasz z SVG? Ustalony wektorowy kształt i po prostu skalowanie tego. Proporcje powinny być zachowane.

Możesz do tego użyć Canvas - łatwo pobierzesz rozmiar okna i dostosujesz rysowane obiekty - minusem jest brak wsparcia w niektórych przeglądarkach (głównie IE).

Z drugiej strony taki obrazek nie powinien zajmować dużo ponieważ posiada tylko kilka kolorów.

armatę na muchę...

poza tym jednym z problemów z Canvasem jest to, że działa na pikselach, a nie wektorach - więc przy dużych rozmiarach płótna zwyczajnie zamula (co widać szczególnie, jak są jakieś animacje).

chyba jednak lepiej to zrobić CSS3 albo SVG...

edit:

a jaki teraz masz kod? Robisz to pewnie korzystając z jakichś przekształceń perspektywy albo 3d w CSS?

Może zwykła transformacja CSS3?

http://jsfiddle.net/LaMw9/1/

+ to: http://css-tricks.com/almanac/properties/p/perspective/