效果图
在Html Table 表格中 画斜线 分 文字和斜线 两部分实现
文字部分
<th class="row-0" style="width: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;width: 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=oblique_line]:before{content: "";position: absolute;width: 1px;height:164px;/* 需要手调 ,线的长度 */top:171; /* 需要手调 ,线的位置*/left:57;background-color: white; /* 线的颜色 black */display: block;transform: rotate(-74deg);/* 需要手调 ,斜线的角度*/transform-origin: top;}
</style>