css, jak umieścić obiekt o nieregularnym kształcie na stronie

Witam,

Chcę umieścić na na stronie www, na samej górze diva, który wyświetla nie regularną grafikę.
Zaczyna od lewego-górnego roku i idzie w dół, pod kontem około 25 stopni. Czyli po lewej stronie jest niski, a po prawej coraz wyższy.
Jak mielibyśmy narysować piramidę.

Grafikę przygotuj już przekręconą i umieść ją tak jakbyś umieścił zwykłą.

ew. transform: rotate(25deg);

Ale ona ma się skalować(zmieniać szerokość), dopasowywać się do okna. czyli jak 900px okno to 900px szer. grafika, jak 1500px okno to 1500px grafika. to chyba nie da rady umieścić tego jako grafika? może lepiej napisać to w css? + te rotate?

no to width/height 100%.
generalnie to fajnie by było konkretny przykład (tj tej grafiki)

a co ze starszymi przeglądarkami? rotate nie będzie działać np w IE8, a mnóstwo osób jeszcze korzysta z tej przeglądarki.

to ma być prostokąt, tło jako gradient. i ma być obrócony tak około 20 stopni. i najeżdża z góry, ale nie pokazuje sie cały, tyko jego kawałem jakieś 2-3 cm

Nie możesz dać przykładu? To o wiele prostsze niż wnioskowanie z opisów - które często nie sprawdzają sie z prawdziwymi intencjami piszącego posty.

Tak, rotate nie zadziała w IE8. Więc albo grafiki przekręć i takie zapisz, albo "nie da się". Albo po prostu serwuj IE8 to na co zasługuje - jednolite tło czy inny fallback.

coś takiego: http://zapodaj.net/ce50b1dbb0ebc.png.html

i to ma zmieniać szerokość wraz ze zmianą szerokości okna przeglądarki

Nic sensownego dla IE8 nie zrobisz. Kombinować można na wiele sposobów z gorszymi lub lepszymi efektami, ale raczej nie ma sensu. Najprościej - zrób to jako css3 gradient i tyle. Żadnych obrazków, transofmacji itd.

fakt, gradient będzie lepszy.

gradient w CSS3 zostawia okropne schodki, na dole gradiendu. idzie się jakoś tego pozbyć ?

Schodki? Screenshot + info czy na każdej przeglądarce + jakiś kod.

scrren: http://zapodaj.net/910899f74139e.png.html

na każdej przeglądarce to samo.

kod:

position: absolute;
top: -115px;
left: -20px;
height: 170px;
width: 110%;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 0%, #fcfcfc 43%, #e3e3e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(0%,#2989d8), color-stop(43%,#fcfcfc), color-stop(100%,#e3e3e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 0%,#fcfcfc 43%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 0%,#fcfcfc 43%,#e3e3e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 0%,#fcfcfc 43%,#e3e3e3 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 0%,#fcfcfc 43%,#e3e3e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#e3e3e3',GradientType=0 ); /* IE6-9 */

transform:rotate(-2deg); -webkit-transform:rotate(-2deg); 
-moz-transform:rotate(-2deg); -o-transform:rotate(-2deg); 

-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
 

chodzi o to, że tam musi być jeszcze ten cień. i użyłem gradient + rotate, a nie same gradient, bo nie wiedziałem co z cieniem??

Przygotuj png z przezroczystością, ustaw jako tło ze skalowalnością i tyle.

podaj krótki opis w kodzie ? bo nie wiem jak skalować taki obrazek? mam np 1000px szer. obrazek, a okno przeglądarki 1500px i jak to przeskalować ?

Robisz diva ustawiasz mu ten twój obrazek jako background-image oraz ustawiasz background-size:100% 100%; tło będzie zawsze dopasowane do wielkości diva a jak rozumiem o to tobie chodzi, żeby kształ był raz taki raz taki zależnie od okna. Jak można dopasować zachowanie tła możesz luknąć tutaj tu http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

ok, dało radę. działa gradient i rotate. ostatni błąd to taki, że pod tym gradientem jest zdjęcie i tylko tam są te schodki o których wcześniej pisałem. Może wiec ktoś czy idzie to jakoś zniwelować ? jakiś filtr w cssach czy coś ?

możecie usunąć temat z forum? już udało się