Draw diagonal lines on Web pages

After reading the regular horizontal and vertical lines of the Web, occasional diagonal lines will give you a special feeling. First, let's look at the diagonal line effect.

A simple slash adds a lot of colors to the page, but how can we draw it on a web page? When it comes to plotting, you may have come up with a point. Below is the code

<SCRIPT type = "text/JavaScript"> $ (). ready (function () {function wirteline (o) {var myheight = O. parent (). height (); // obtain the height and width var mywidth = O. parent (). width (); var COUNT = myheight <= mywidth? Myheight: mywidth; var divstring = ""; for (VAR I = 0; I <= count; I ++) // cyclically draw {divstring + = "<Div class = 'line' style = 'top:" + I. tostring () + "PX; left:" + (mywidth --). tostring () + "PX; '> </div>"; // Why is this not the case? // O. append ("<Div class = 'line' style = 'top:" + I. tostring () + "PX; left:" + (mywidth --). tostring () + "PX; '> </div>");} o. append (divstring); // if the object is repeatedly obtained as above, it will be a bit slow} wirteline ($ ('. linebox');}); </SCRIPT>

The basic principle is that a div is a pixel and a diagonal line is formed based on the position of the div. I will not talk about the specific code. There are comments on it.

CSS and HTML:

    <style type="text/css">        #mydiv{ width:900px; height:600px;}        .linebox{ position:relative;width:100%; height:100%;}        .line{ background-color:Red; width:1px; height:1px; position:absolute; opacity:0.5}        .border{ border-top:solid 3px blue; border-left:solid 3px red; height:10px; width:10px;}    </style><div id="mydiv"><div class="linebox"></div></div>

The following is in firebug:

It looks a little scary. I wonder if you have any better solutions?

In fact, there is another way to draw a diagonal line, but it cannot be used to modify the page. The principle is to use the border of the Div. First, let's look at the next Div.

Have you found the diagonal line?

<Div style = "border-top: solid 4px blue; border-left: solid 4px red; Height: 10px; width: 10px;"> </div>

If you set the Border width to a greater value, you can create a slash. The effect on the header is good.

Is this simpler? How to Use It depends on you!

Technorati labels: Web diagonal lines, CSS and JS diagonal lines