Diagonal Navigation with Rollover Images

[lindsay]

I'm hoping someone can help me with this. I'm trying to recreate the navigation on this page (top right, yellow box):

http://takecontroldelaware.com/

I can't for the life of me get this to work because of the diagonal images. Any thoughts? Thanks in advance!

 

[CaldwellYSR]

The images aren't actually diagonal. Each image is a rectangle with the diagonal white part you see and then the rest of the rectangle is the correct color to line up with the image beside it. So since it matches up like that you see the white diagonal lines and you don't see the yellow part because it blends with the next button.

 

[PixelPusher]

Yeah just like Caldwell said, the diagonal effect is all part of the image. It could be curved, jagged, anything. The image will always be a square or rectangular shape. There is no exception. In this particular case they are using a transparent image with a diagonal white bar. This image is overlaying the parent element's background, the list (orange image). When the mouse hovers over one of the anchors [in the list] the background switches to white and thus blends with the diagonal transparent image to create the trapezoid shape.

Look into firebug for Firefox or Chrome. It's a very helpful tool that allows you to pick apart any website. Imo, firebug is an essential tool for a web designer.

 

[CaldwellYSR]

Transparent! Duh that would be easier I forgot all about that