Slanted corner on bordered box

[AnTeK]

Hi there,

I've been reading sitepoint for quite a while and Now i need your help . I've come accross a problem that has just stumped me.

Basically I'm trying to make a box with a slanted corner (something like the "articles" or "forums" tabs that you see on top of sitepoint pages. the difference is that my box needs to have a border. If I were to put a border around it it will be a square border but i want a slanted border. basicly so the border follows the outline of the slant (along the image its no problem cause hte border will be part of the image) but the problem is that the border will appear "around" the image.

Ive tried putting 2 boxes inside eachother and using the background image property of the outside one and the border property of the inside one. but the border appears on top of the background image. Even when you change the z-indexes.

anyone have any ideas?

Realy would appreciate some help.

Thx
Antek.

[Paul O'B]

Hi,

I'm not sure if this is what you mean but can't you just use the part of the image that isn't a slant to rub out the rest of the boxes border.

A very rough example here:

http://www.pmob.co.uk/temp/slant.htm

Or you may be able to put this to use:

http://www.infimum.dk/HTML/slantinfo.html

Paul

[AnTeK]

http://www.pmob.co.uk/temp/slant.htm

Hi Paul,

Thx for your prompt reply I think this is exactly what I was looking for. I guess i was trying to do it with background images (cause you can edit them with the style sheet) rather then regular images which have to be included in the html code. But i think I will just use the method you linked to either way.

Thanks

Antek

[craigray]

I have been playing with this as well. Does not yet work in NETSCAPE, but works well in IE. Look at
HTTP://www.acom.edu.au/acom.php

All of the boxes on the screen use background images in a CSS, including the scrollbox that actually works when you click the arrows.