lixiangni

    用邊框線來摸擬斜線，我們知道，如果將一個DIV的邊框線設置得足夠寬並定義了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線。知道了這個原理，我們就可以用border-left和border-top來模擬出斜線的效果。

    我們先創建一個結構：
  <div>
    <b>類別</b>
    <em>姓名</em>
  </div>

    我們用<div>作為對角線的容器，我們來設置斜線樣式，關鍵代碼如下：
.out{
   border-top:40px #D6D3D6 solid;/*上邊框寬度等於表格第一行行高*/
   width:0px;/*讓容器寬度為0*/
   height:0px;/*讓容器高度為0*/
   border-left:80px #BDBABD solid;/*左邊框寬度等於表格第一行第一格寬度*/      
  position:relative;/*讓裡面的兩個子容器絕對定位*/
}

    <b>和<em>兩個標籤來設置兩個分類，分別將它們設置為塊狀結構display:block;清除其默認的字體樣式font-style:normal；因其父容器設置了相對定位，所以設置其為絕對定位，這樣可以將它偏移到你想指定的位置了。

b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}     

    這樣一個斜線對角線就模擬出來了。知道了原理，你可以變成很多有趣的東西出來，祝你好運！

    這種對角線模擬法的缺點：

    1.寬高度必須是已知的

    2.寬高的長度不能差得太大，你可以試試將寬度拉得比高度長好幾倍，看看效果

    3.還有就是斜線條不能設置顏色。

    另：以上代碼只測試了ie6和ff3，其它瀏覽器未做測試。