用div+css類比表格對角線

來源:互聯網
上載者:User

有時在插入文檔時,要用到表格對角線,常見的作法是用圖片的方式來處理,還有就是用vml來畫對角線,能不能用html+css方式來實現呢?答案是肯定的,下面我們來摸擬一個表格對角線。

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

我們先建立一個結構:

<div class="out">

<b>類別</b>

<em>姓名</em>

</div>

我們用<div class="out">作為對角線的容器,我們來設定斜線樣式,關鍵代碼如下:

.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,其它瀏覽器未做測試。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.