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ł)