web页面绘制斜线

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

web页面绘制斜线_第1张图片

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

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

CSS和HTML:

    
mydiv">
class="linebox">

下面是Firebug里的截图:

web页面绘制斜线_第2张图片

看起来有点恐怖,不知道你还有没有更好的方法?

其实还有一种方法来绘制斜线,不过不能用来修饰页面,原理是用了div的border,先来看一下一个div

你发现那条斜线了吗?

把border的宽度设置的更大一点就可以仿造一条“斜线”了,用在表头上这个效果还是不错的。

table

这样是不是更简单一些呢?怎么用就看你的了!


Technorati 标签: web斜线, css、js绘制斜线

你可能感兴趣的:(web页面绘制斜线)