Html + css 实现 Table 表格 画斜线的方法
HTML基础 2022-07-11 16:01:34小码哥的IT人生shichen
效果图
在Html Table 表格中 画斜线 分 文字和斜线 两部分实现
文字部分
<th class="row-0" style="150px;height:50px;" >
<div class="biaotou">
<div class="biaotoutxt1">转单办事处</div>
<div class="biaotoutxt2">接单办事处</div>
</div>
</th>
<style>
.biaotou {
line-height: 5px;
text-align: left;
/* 用背景图片 方式 有斜线 也是可以的
background: rgba(0, 0, 0, 0) url("${base}/images/tab_bg.jpg") no-repeat scroll 0 0;
height: 51px;
131px;*/
}
.biaotoutxt1 {
color: #FFFFFF; /* 文字颜色 */
padding: 1px 0 0 65px; /* 文字位置 需要手调 */
}
.biaotoutxt2 {
color: #FFFFFF;
padding: 15px 0 0 5px;
}
</style>
斜线部分
此table可以放在 html 的最下方，仅用于 画斜线
<table><td class="first"></td></table>
<style>
td[class=first]:before{
content: "";
position: absolute;
width: 1px;
height:164px;/* 需要手调 ，线的长度 */
top:12; /* 需要手调 ，线的位置*/
left:0;
background-color: white; /* 线的颜色 black */
display: block;
transform: rotate(-74deg);/* 需要手调 ，斜线的角度*/
transform-origin: top;
}
</style>
完整示例：
<html><head><style>
.biaotou {
line-height: 5px;
text-align: left;
}
.biaotoutxt1 {
color: #666; /* 文字颜色 */
padding: 1px 0 0 65px; /* 文字位置 需要手调 */
}
.biaotoutxt2 {
color: #666;
padding: 15px 0 0 5px;
}
td[class=first]:before{
content: "";
position: absolute;
width: 1px;
height:164px;/* 需要手调 ，线的长度 */
top:12; /* 需要手调 ，线的位置*/
left:0;
background-color: black; /* 线的颜色 black */
display: block;
transform: rotate(-74deg);/* 需要手调 ，斜线的角度*/
transform-origin: top;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td class="first"></td>
<th class="row-0" style="150px;height:50px;">
<div class="biaotou">
<div class="biaotoutxt1">转单办事处</div>
<div class="biaotoutxt2">接单办事处</div>
</div>
</th>
</tr>
</tbody>
</table>
</body>
</html>可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html 