Skośny kontener w HTML?

[Seifer]

Witam, jestem nowy na forum.

Stworzyłem grafikę do pewnego projektu i właśnie uświadomiłem sobie, że nie wiem jak ugryźć kodowanie/cięcie tego laya... a zależy mi na jak najszybszym zakończeniu tego projektu.

Konkretnie mam problem z tym, że mam grafikę (romb z wierzchołkami jak strony świata w kompasie N,E,S,W) i zależy mi, aby utworzyć z niej kontener z efektem :hover, jednak równie bardzo zależy mi, aby efekt działał w obrębie kontenera, a co za tym idzie kontener również musi być rombem.

I tutaj pytanie... czy jest to w ogóle wykonalne, aby uzyskać ten efekt w samym html+css? Jeśli tak to prosiłbym o naprowadzenie mnie na drogę ku uzyskaniu tego efektu, a jeśli nie to prosiłbym o informacje jak uzyskać ten efekt w inny sposób, z tym, że bardzo zależałoby mi, aby nie korzystać z flasha.


Z góry dziękuję za pomoc, szczególnie za szybką pomoc.

Pozdrawiam,
Seifer


EDIT: Dla jasności co do wyglądu tego rombu to jest to coś w tym stylu:

(jak widać na zamieszczonym obrazku, wierzchołek jest podstawą, tak więc zwykły div nie zadziała tak jak bym tego chciał)

[Kartofelek]

masz 2 wyjścia:
1) css3 i web transform
2) stare dobre html map

[Seifer]

masz 2 wyjścia:
1) css3 i web transform
2) stare dobre html map

Dzięki wielkie za szybką odpowiedź.

Orientujesz się może jak tam przeglądarki sobie radzą z transformacją css3? bo wiem, że już z border-radius nie jest zbyt sympatycznie.
Ewentualne hacki byłyby mile widziane.
Jeszcze raz dzięki.

[Kartofelek]

Wybierz punkt 2, bo transformacje CSS3 są o wiele gorzej obsługiwane niż radius