用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