[thelist] I'm guessing this isn't possible with CSS2

Hardacker, Andrew Andrew.Hardacker at Compuware.com
Thu May 2 10:13:01 CDT 2002

I've been hunting around trying to figure out a way of laying out the boxes
which have one corner cut on the diagonal using CSS.

What I've come up with so far:

* make a class for a div which has a 1 pixel white border on each side
* make a small gif of a diagonal white line

If I have this as the background of the div, I'll still see the square
corner, as well as the diagonal line.
If I place the image inside the div, it'll sit inside the border - so I'll
still see the square corner

Rachel, the trick is to use negative margins on the div holding the image.

I "borrowed" these corner images from jeff (thanks!). Note the size (25 x
25) and the width of the line in the image (4px). Setting the margin to -4px
moves the image over the border.

Tested on IE6 and Netscape6.2.

<div id="box" style="width:600px;margin:10px auto -4px auto;border:4px
dotted blue;">
  <div id="corners"
style="position:relative;top:0px;left:0px;height:25px;margin:-4px -4px 0px
    <div id="top-left-corner"
src="http://members.evolt.org/jeff/images/bs_tl.gif" width="25" height="25"
border="0" alt=""></div>
    <div id="top-right-corner" style="float:right;"><img
src="http://members.evolt.org/jeff/images/bs_tr.gif" width="25" height="25"
border="0" alt=""></div>
  <div id="content" style="position:relative;width:100%;">
    <div style=""><h1>Corner images on a div</h1></div>


andy at hardacker.com (currently baffled by MozillaRC1)

The contents of this e-mail are intended for the named addressee only. It
contains information that may be confidential. Unless you are the named
addressee or an authorized designee, you may not copy or use it, or disclose
it to anyone else. If you received it in error please notify us immediately
and then destroy it.

More information about the thelist mailing list