用CSS3的線性漸變做出表格斜線效果的方法-教學撰寫:徐嘉裕Neil hsu

從我開始設計網站到現在,就知道用CSS的border參數是無法畫出表格斜線的,但隨者CSS的發展到CSS3之後,已經延伸出一種可以畫出像以下範例的表格斜線的方法:


就是使用線性漸變的方法(linear-gradient)來實現,在IE10以上跟Google及火狐都能正常顯示,其實方法也不會很困難,以下為製作表格斜線的範例,大家可以參考看看。

表格結構部分(看紅字即可)

<thead>
<tr>
<th>
<div class="slash">
<div class='slash01'>年級</div>
<div class='slash02'>科別</div>
</div>
</th>
  略.............
</tr>
</thead>


css樣式部分

 .slash{
  position:relative;
  width:100px;
  height:40px;
  box-sizing:border-box;
  line-height:120px;
  background: linear-gradient(135deg, transparent 49.5%, #212121 49.5%, transparent 50.5%, transparent 50.5%);
}


.slash01{
position: absolute;
top: -50px;
}
.slash02{
position: absolute;
top: -25px;
left: 50px;
}

135deg為傾斜角度,設45deg則為則斜線會左右顛倒,#212121為斜線的顏色,其他都設為transparent透明即可。

.slash01跟.slash02都設為absolute(浮動),顯示位置可以按實際需求調整(left and  top)。

這樣至少不用再吧表格畫成圖檔或是用很奇怪的方式來解決了,linear-gradient一次搞定。


教學撰寫:徐嘉裕 Neil hsu





留言

這個網誌中的熱門文章

Xoops免費佈景:neilambilight2.5正式版釋出-佈景設計開發:徐嘉裕Neil hsu

在CentOS7上安裝XAMPP並設定允許外部連線phpmyadmin的方法-教學撰寫:徐嘉裕Neil hsu

jquery.datepicker下拉月曆只顯示年-月的設定方法-教學撰寫:徐嘉裕Neil hsu