用div+css模擬表格對角線

2020-03-24 16:21:39

字體：大中小

來源：轉載

供稿：網友

首先聲明：這只是探討一種CSS模擬表格對角線的用法，實際在工作中可能覺得這樣做有點小題大作，這不是本主題討論的重點。如果對此深以為然的朋友，請一笑過之。。。有時在插入文檔時，要用到表格對角線，常見的作法是用圖片的方式來處理，還有就是用vml來畫對角線，能不能用html+css方式來實現呢？答案是肯定的，下面我們來摸擬一個表格對角線。原理：用邊框線來摸擬斜線，我們知道，如果將一個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;} 這樣一個斜線對角線就模擬出來了。知道了原理，你可以變成很多有趣的東西出來，祝你好運！這種對角線模擬法也有缺點：寬高度必須是已知的寬高的長度不能差得太大，你可以試試將寬度拉得比高度長好幾倍，看看效果。（給你們留點作業練習練習）還有就是斜線條不能設置顏色。另：以上代碼只測試了ie6和ff3，其它瀏覽器未做測試，請朋友們測試一下。下面是完整的代碼：運行代碼框

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：8個必須掌握的CSS布局技巧

下一篇：HTML5 CSS3實現一個精美VCD包裝盒個性幻燈片案例