武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：這只是探討一種CSS模擬表格對(duì)角線(xiàn)的用法，實(shí)際在工作中可能覺(jué)得這樣做有點(diǎn)小題大作，這不是本主題討論的重點(diǎn)。如果對(duì)此深以為然的朋友，請(qǐng)一笑過(guò)之.

首先聲明：

這只是探討一種CSS模擬表格對(duì)角線(xiàn)的用法，實(shí)際在工作中可能覺(jué)得這樣做有點(diǎn)小題大作，這不是本主題討論的重點(diǎn)。如果對(duì)此深以為然的朋友，請(qǐng)一笑過(guò)之。。。

有時(shí)在插入文檔時(shí)，要用到表格對(duì)角線(xiàn)，常見(jiàn)的作法是用圖片的方式來(lái)處理，還有就是用vml來(lái)畫(huà)對(duì)角線(xiàn)，能不能用html+css方式來(lái)實(shí)現(xiàn)呢？答案是肯定的，下面我們來(lái)摸擬一個(gè)表格對(duì)角線(xiàn)。

原理：

用邊框線(xiàn)來(lái)摸擬斜線(xiàn)，我們知道，如果將一個(gè)DIV的邊框線(xiàn)設(shè)置得足夠?qū)挷⒍x了不同的顏色時(shí)，其相鄰的兩條邊框線(xiàn)交界處就是斜線(xiàn)。知道了這個(gè)原理，我們就可以用border-left和border-top來(lái)模擬出斜線(xiàn)的效果。

我們先創(chuàng)建一個(gè)結(jié)構(gòu)：

  <div class="out">
    <b>類(lèi)別</b>
    <em>姓名</em>
  </div>

我們用<div class="out">作為對(duì)角線(xiàn)的容器，我們來(lái)設(shè)置斜線(xiàn)樣式，關(guān)鍵代碼如下：

.out{
   border-top:40px #D6D3D6 solid;/*上邊框?qū)挾鹊扔诒砀竦谝恍行懈?/
   width:0px;/*讓容器寬度為0*/
   height:0px;/*讓容器高度為0*/
   border-left:80px #BDBABD solid;/*左邊框?qū)挾鹊扔诒砀竦谝恍械谝桓駥挾?/      
  position:relative;/*讓里面的兩個(gè)子容器絕對(duì)定位*/
}

<b>和<em>兩個(gè)標(biāo)簽來(lái)設(shè)置兩個(gè)分類(lèi)，分別將它們?cè)O(shè)置為塊狀結(jié)構(gòu)display:block;清除其默認(rèn)的字體樣式font-style:normal；因其父容器設(shè)置了相對(duì)定位，所以設(shè)置其為絕對(duì)定位，這樣可以將它偏移到你想指定的位置了。

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;}      

這樣一個(gè)斜線(xiàn)對(duì)角線(xiàn)就模擬出來(lái)了。知道了原理，你可以變成很多有趣的東西出來(lái)，祝你好運(yùn)！

這種對(duì)角線(xiàn)模擬法也有缺點(diǎn)：

另：以上代碼只測(cè)試了ie6和ff3，其它瀏覽器未做測(cè)試，請(qǐng)朋友們測(cè)試一下。

下面是完整的代碼：

運(yùn)行代碼框

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]