Sometimes when inserting a document, table diagonals need to be used. The common method is to use pictures to process them, and there is also the use of vml to draw diagonals. Can this be achieved using html+css? The answer is yes, let's simulate the diagonal of a table.
Use border lines to simulate diagonal lines. We know that if the border line of a DIV is set wide enough and different colors are defined, the intersection of two adjacent border lines will be a diagonal line. Knowing this principle, we can use border-left and border-top to simulate the effect of slashes.
Let's first create a structure:
<div class="out">
<b>Category</b>
<em>Name</em>
</div>
We use <div class="out"> as the diagonal container, and we set the slash style. The key code is as follows:
.out{
border-top:40px #D6D3D6 solid;/*The width of the top border is equal to the height of the first row of the table*/
width:0px;/*Let the container width be 0*/
height:0px;/*Let the container height be 0*/
border-left:80px #BDBABD solid;/*The width of the left border is equal to the width of the first cell in the first row of the table*/
position:relative;/*Make the two sub-containers inside absolutely positioned*/
}
<b> and <em> tags are used to set two categories, and set them to block structures respectively. display:block; clear their default font style font-style:normal; because the parent container has set relative positioning, So set it to absolute positioning, so you can offset it to the position 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 simulated. If you know the principle, you can turn it into many interesting things. I wish you good luck!
Disadvantages of this diagonal simulation method:
1. The width and height must be known.
2. The length of the width and height cannot be too different. You can try to make the width several times longer than the height to see the effect.
3. Also, the color of the diagonal lines cannot be set.
Another note: The above code only tested ie6 and ff3, and other browsers were not tested.