Use DIV + CSS to create a diagonal line effect record, and use divcss to create a diagonal line.

Use DIV + CSS to create a diagonal line effect record, and use divcss to create a diagonal line.

The DIV + CSS diagonal line effect is very simple. You only need to set the Border of CSS Border to have a diagonal line effect. The code is shared with everyone, and you can make your own changes.

Note: 1. DIV width and height. 2. DIV has a height by default in IE6.

On the right side is the implementation result. The Code is as follows:

123456789101112

<div id="box"></div> <style type="text/css">#box{    width:0px; height:0px;    border:40px solid #000;    border-top-color:#930;    border-bottom-color:#0C3;    border-left-color:#FC0;    border-right-color:#009;}</style>

In FF IE7, IE8 is displayed normally, but in IE6, there is a gap in the middle, as shown on the left. Therefore, you need to add a line:

Line-height: 0px;

The final code is as follows:

123456789101112131415

<div id="box"></div> <style type="text/css">#box{     width:0px; height:0px;    border:40px solid #000;    border-top-color:#930;    border-bottom-color:#0C3;    border-left-color:#FC0;    border-right-color:#009;    line-height:0px;}</style>