web页面绘制斜线

在看惯了web的中规中矩的横线和竖线后，偶尔来点斜线将给人一种别致的感 觉。先看看斜线的效果

简简单单的一条斜线给页面增色不少吧，但是在web页面中怎么来绘制呢？说 到绘制，可能你已经想到了，就是一个点一点画出来。下面是代码

<script　type="text/javascript">
　　　　 $().ready(function(){
　　　　　　 function　wirteline(o){
　　　　　　　　 var　myHeight=o.parent().height();　　//获得高度和宽 度
　　　　　　　　 var　myWidth=o.parent().width();
　　　　　　　　 var　count=myHeight<=myWidth? myHeight:myWidth;
　　　　　　　　 var　divstring="　";
　　　　　　　　 for(var　i=0;i<=count;i++)　//循环绘制
　　　　　　　　 {
　　　　　　　　　　 divstring+="<div　class='line'　 style='top:"+i.toString()+"px;left:"+(myWidth--).toString() +"px;'></div>";
　　　　　　　　　　 //为什么不直接这样呢？
　　　　　　　　　　 //o.append("<div　class='line'　 style='top:"+i.toString()+"px;left:"+(myWidth--).toString() +"px;'></div>");

　　　　　　 wirteline($('.linebox'));
　　　　 });
　　 </script>

基本原理就是一个div一个像素，根据div的位置组成一条斜线。具体代码我就 不说了吧，上面有注释。