如何在网页中画斜线


各位是否能给点提示，如何在网页中做出这张图。
谢谢！！

解决方案 »

  1.   

    +
    要不就用画图，或图片
    # //画图   
    # IE：VML。   
    # FF：SVG。
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #container { width: 200px; height: 100px; border: 1px solid red; position: relative;}
    #chart { position: absolute; height: 200px}
    </style>
    </head>
    <body>
    <div id="container">
    <div id="chart"></div>
    </div>
    <script>
    void function() {
    var arr = [], T$ = function(id) { return document.getElementById(id); },
    fx = function(t,b,c,d){ return c*t/d + b; }, i = 0;
    for ( ; i < 200; i++) {
    arr.push('<div style="width:1px;height:1px;font-size:0;background-color:#FF0066;position:absolute;left:'+(i - 1)+'px;top:'+(Math.ceil(fx(i, 0, 100, 200)))+'px"><\/div>');
    } 
    T$('chart').innerHTML = arr.join('');
    }();
    </script>
    </body>
    </html>
      

  3.   

    GDI
    Graphics Device Interface的缩写，含义是图形设备接口，它的主要任务是负责系统与绘图程序之间的信息交换，处理所有Windows程序的图形输出。
    　　在Windows操作系统下，绝大多数具备图形界面的应用程序都离不开GDI，我们利用GDI所提供的众多函数就可以方便的在屏幕、打印机及其它输出设备上输出图形，文本等操作。GDI的出现使程序员无需要关心硬件设备及设备驱动，就可以将应用程序的输出转化为硬件设备上的输出，实现了程序开发者与硬件设备的隔离，大大方便了开发工作。 
    　　GDI是如何实现输出的？　
    　　要想在屏幕或者其它输出设备上输出图形或者文字，那么我们就必须先获得一个称为设备描述表( DC:Device Context）的对象的句柄，以它为参数，调用各种GDI函数实现各种文字或图形的输出。设备描述表是GDI内部保存数据的一种数据结构，此结构中的属性内容与特定的输出设备（显示器，打印机等）相关，属性定义了GDI函数的工作细节，在这里属性确定了文字的颜色，x坐标和y坐标映射到窗口显示区域的方式等。
    　　设备描述表句柄一旦获得，那么系统将使用默认的属性值填充设备描述表结构。
    　　如果有必要，我们可以使用一些GDI函数获取和改变设备描述表中的属性值。这个对你有帮助你 再去网上查查，具体怎么画我几步太清了，我学的时候老师讲过，现在几步太清了
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #container { width: 200px; height: 100px; border: 1px solid red; position: relative;}
    #chart { position: absolute; height: 200px}
    </style>
    </head>
    <body>
    <div id="container">
        <div id="chart"></div>
    </div>
    <script>
    void function() {
        var arr = [], T$ = function(id) { return document.getElementById(id); },
            fx = function(t,b,c,d){ return c*t/d + b; }, i = 0;
        for ( ; i < 200; i++) {
            arr.push('<div style="width:1px;height:1px;font-size:0;background-color:#FF0066;position:absolute;left:'+(i - 1)+'px;top:'+(Math.ceil(fx(i, 0, 100, 200)))+'px"><\/div>');
        } 
        T$('chart').innerHTML = arr.join('');
    }();
    </script>
    </body>
    </html>
    可以
      

  5.   

    对效果要求不高的话，用GIF图片就可以了，调整图片的宽高为100%占满单元格；
    要求高的话，用矢量的动态画，比如vml(for IE 8-), svg or canvas(for IE9+, FF, Opera,...)