效果圖
在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>