个人博客 > 学无止境 > WEB前端 > css斜线实现方法

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>

效果图如下:

css斜线实现方法

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>

效果图如下:

css斜线实现方法

由于博主对PS不熟悉,就随便找了张图,方向不一样,不管不影响结果哈!

本文出自:琅枫个人博客。如需转载请注明出处!

本文出处:"https://www.phpfeng.cn/learn/web/132.html"

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对琅枫博客的支持! ~(@^_^@)~

微信打赏

琅枫博客微信号

支付宝打赏

琅枫博客个人支付宝
本文关键词: 斜线 方法



你想在庞大的互联网上留下一丝足迹?

我不想成为一个庸俗的人。十年百年后,当我们死去,质疑我们的人同样死去,后人看到的是裹足不前、原地打转的你,还是一直奔跑、走到远方的我?

点我了解如何搭建个人博客?