Tabbed interface with angled tabs

HTML & CSS
1

Hi,

Can anyone help me make these tabs in CSS which are slightly angled at the right? I have attached a design with the post.

Will images be used to make these tabs or can it be done by pure CSS?

Any help would be appreciated. Thanks a lot.

2

In the bigining I too tried to do everything with CSS because I sucked at photoshop. But trust me, spend a little time with photoshop and you will just do the image. Not that I’m very good with PS. I muttle through.

3

Hi,

See Mine and Jasons posts in this thread for a css version although it will take some skill to change it to match your drawing though.

Perhaps it’s easier just to use images using the sliding doors techniques and here’s the basic example (just view source for the code. It uses [URL=“http://www.pmob.co.uk/temp/images/slanttab3.png”]this image for all the tabs which should allow for text to be resized within limits.).

Your drawing shows the first tab as a different image from the others so you would need to make a special image just for the first one.

4

Thanks wric and paul for your replies.

Paul, the basic example is very good. It almost solves my problem except for the first tab image.

Thanks

5

Yes you’ll just have to make a new image for the first tab (or double image depending on what you wanted it to look like in the normal state). Then just give it a new class/id and use the new image for that tab only.

It’s just more of the same so you should be able to manage :slight_smile: