To simulate a table diagonal with div+css

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.

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:

<div class= "Out" >

<b> category </b>

<em> name </em>

</div>

We use the <div class= "out" > 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 * *

}

<b> and <em> 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!

The disadvantage of this diagonal simulation method:

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, see the effect

3. There is also a slash bar can not set the color.

Another: The above code only tests IE6 and FF3, other browsers do not test.