DIV+CSS 斜線效果很簡單，只需設置一下CSS Border 的邊框就能有斜線效果。代碼分享給大家，你可以自己變通。 提示要註意兩點：1、DIV寬高的定義。2、DIV在 IE6 中預設是有高度的。 上圖右邊是我們要實現的效果，代碼如下：123456789101112 在FF IE7 IE8...
DIV+CSS 斜線效果很簡單，只需設置一下CSS Border 的邊框就能有斜線效果。代碼分享給大家，你可以自己變通。
提示要註意兩點：1、DIV寬高的定義。2、DIV在 IE6 中預設是有高度的。
上圖右邊是我們要實現的效果，代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="box"></div>
<style type="text/css">
#box{
width:0px; height:0px;
border:40px solid #000;
border-top-color:#930;
border-bottom-color:#0C3;
border-left-color:#FC0;
border-right-color:#009;
}
</style>
|
在FF IE7 IE8 都顯示正常，但在IE6中，卻如上圖左邊所示，中間有差距，因此，需要加一行：
line-height:0px;
最終代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="box"></div>
<style type="text/css">
#box{
width:0px; height:0px;
border:40px solid #000;
border-top-color:#930;
border-bottom-color:#0C3;
border-left-color:#FC0;
border-right-color:#009;
line-height:0px;
}
</style>
</head>
|
