css斜线实现方法
这里呢博主在网站找了很多资料，实现方法基本上都是用JS实现的，那种办法基本上是行不通的，因为斜线是实现了，里面内容却没办法输入。这里呢博主就不打算介绍这种办法了。
css斜线实现方法如下：
1、可以用CSS3属性transform实现；
代码如下：
<!doctype html>
<html>
<head>
<title>css斜线实现方法-琅枫博客</title>
</head>
<style>
#td1{
border-bottom:1px solid #000000;
-webkit-transform: rotate(15deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(15deg);/*Firefox 3.5+*/
transform:rotate(15deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.15);
position: relative;
top: -11px;
}
</style>
<body leftmargin="20" topmargin="20">
<table border="0" bgcolor="000000" cellspacing="1" width="400">
<tbody>
<tr bgcolor="FFFFFF">
<td id="td1"></td>
<td>张三</td>
<td>李四</td>
<td>王五</td>
</tr>
<tr bgcolor="FFFFFF">
<td>数学</td>
<td>55</td>
<td>66</td>
<td>77</td>
</tr>
<tr bgcolor="FFFFFF">
<td>英语</td>
<td>99</td>
<td>68</td>
<td>71</td>
</tr>
<tr bgcolor="FFFFFF">
<td>语文</td>
<td>33</td>
<td>44</td>
<td>55</td>
</tr>
</tbody>
</table>
</body>
</html>效果图如下：
2、其实是可以用背景图的形式来实现,需要一张有斜线的背景图。
代码如下：
<!doctype html>
<html>
<head>
<title>css斜线实现方法-琅枫博客</title>
</head>
<style>
#td1{
background:url(xx.jpg) no-repeat;
background-size:100% 100%;
}
</style>
<body leftmargin="20" topmargin="20">
<table border="0" bgcolor="000000" cellspacing="1" width="400">
<tbody>
<tr bgcolor="FFFFFF">
<td id="td1"></td>
<td>张三</td>
<td>李四</td>
<td>王五</td>
</tr>
<tr bgcolor="FFFFFF">
<td>数学</td>
<td>55</td>
<td>66</td>
<td>77</td>
</tr>
<tr bgcolor="FFFFFF">
<td>英语</td>
<td>99</td>
<td>68</td>
<td>71</td>
</tr>
<tr bgcolor="FFFFFF">
<td>语文</td>
<td>33</td>
<td>44</td>
<td>55</td>
</tr>
</tbody>
</table>
</body>
</html>效果图如下：
由于博主对PS不熟悉，就随便找了张图，方向不一样，不管不影响结果哈！
本文出自：琅枫个人博客。如需转载请注明出处！
本文出处："https://www.langfujun.top/learn/web/132.html"
如果您觉得文章对你有帮助，可以进行打赏。
打赏多少，您高兴就行，谢谢您对琅枫博客的支持！ ~(@^_^@)~
微信打赏
支付宝打赏
