DIV+CSS Analog Table Diagonal

First of all: this is only to explore the use of a CSS simulation table diagonal, actually in the work may feel that this is a bit of a fuss, this is not the focus of this topic discussion. If you think of this friend, please smile ...

Sometimes when inserting a document, use the diagonal of the table, common practice is to use the way of the picture to handle, there is to use VML to draw diagonal line, can use html+css way to realize? The answer is yes, let's touch the diagonal of a table below.
Its principle:
Using a border line to touch a slash, we know that if you set a div's border line wide enough to define a different color, its adjacent two border lines are diagonal. Knowing this principle, we can use Border-left and border-top to simulate the effect of a slash.
We first create a structure:

category
name

We use the

as a diagonal container, we set the slash style, the key code is as follows:
. out{
border-top:40px #D6D3D6 solid;/* top border width equals table first row Height * *
width:0px;/* make the container width 0*/
height:0px;/* make the container height 0*/
border-left:80px #BDBABD solid;/* The width of the left border is equal to the first width of the first row of the table * *
position:relative;/* let the inside of the two sub containers absolutely positioning * *
}
and two labels to set up two categories, set them to block structure Display:block, clear their default font style Font-style:normal, and set them as absolute positioning because their parent container has relative positioning set. This will offset it to the location you want to specify.
b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}
Such a diagonal line is modeled. Know the principle, you can become a lot of interesting things out, wish you good luck!
This diagonal simulation also has drawbacks:
1. The width height must be known
2. The width of the length can not be too large, you can try to pull the width than the height of several times longer, to see the effect. (For you to save some homework practice exercises)
3. There is also a slash bar can not set the color.
Another: The above code only tested IE6 and FF3, other browsers did not test, please friends to test.

The following is the HTML page special effects code, click the Run button to see the effect:
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]