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

Jay Blanchard jay.blanchard at niicommunications.com
Thu May 2 06:58: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

Make sure that you set the 'padding' in the DIV to "0", you may have to also
set some of your margins to "0". I have seen many a layout goofed because
the designer did not know about or forgot that margins and padding within a
DIV can be set. Also of note, headings have default padding on their top and
bottom that is often way to large. When you specify headings in CSS you can
override these settings. There are many other entities that can have their
default settings overwritten by using CSS.


More information about the thelist mailing list