我司要實現一個如下效果的table：
image.png
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">占位</th>
</tr>
<tr>
<td id="diagonal-top"></td>
<td>占位</td>
<td>占位</td>
</tr>
<tr>
<td id="diagonal-left">
<div style="position: absolute; top: 10px; right: 10px; ">占位</div>
<div style="position: absolute; bottom: 10px; left: 10px; ">占位</div>
</td>
<td>占位</td>
<td>占位</td>
</tr>
<tr>
<td>占位</td>
<td>占位</td>
<td>占位</td>
</tr>
<tr>
<td>占位</td>
<td>占位</td>
<td>占位</td>
</tr>
</table>
</body>
<style type="text/css">
table {
border-collapse: collapse
}
th, td {
min-width: 200px;
text-align: center;
}
#diagonal-top {
position: relative;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skewY(15deg);
transform-origin: top left;
border-bottom: 1px solid #000;
}
}
#diagonal-left {
position: relative;
height: 100px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skewX(50deg);
transform-origin: top left;
border-left: 1px solid #000;
}
&::after {
content: "占位/占位";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(23deg);
transform-origin: top left;
text-align: right;
}
}
</style>
</html>
在此記錄一下
先寫一個最簡單的table：
<table border="1">
<tr>
<th colspan="3">占位</th>
</tr>
<tr>
<td></td>
<td>占位</td>
<td>占位</td>
</tr>
<tr>
<td>占位</td>
<td>占位</td>
<td>占位</td>
</tr>
<tr>
<td>占位</td>
<td>占位</td>
<td>占位</td>
</tr>
<tr>
<td>占位</td>
<td>占位</td>
<td>占位</td>
</tr>
</table>
效果如下：
image.png
簡單處理一下原生表格的邊框和寬度:
table {
border-collapse: collapse
}
th,td {
min-width: 200px;
text-align: center;
}
image.png
給要處理的單元格添加id，并利用after偽元素添加第一條斜線：
（背景色無用，做參考）
image.png
<td id="diagonal-left">占位/占位</td>
#diagonal-left {
position: relative;
height: 100px;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skewY(15deg);
transform-origin: top left;
border-top: 1px solid #000;
background: pink;
}
}
利用before偽元素添加第二條斜線：
#diagonal-left {
position: relative;
height: 100px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skewX(50deg);
transform-origin: top left;
border-left: 1px solid #000;
background: pink;
}
}
image.png
接下來把單元格內的文字處理為傾斜
嘗試在after偽元素中添加文字：
#diagonal-left {
position: relative;
height: 100px;
&::after {
content: "占位/占位";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skewY(15deg);
transform-origin: top left;
border-top: 1px solid #000;
}
}
image.png
這樣文字傾斜了，但是與需要的效果不一樣，此時需要換一種思路：
在要處理的單元格上方的單元格添加id和after偽元素，實現上方的斜線：
<td id="diagonal-top"></td>
#diagonal-top {
position: relative;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skewY(15deg);
transform-origin: top left;
border-bottom: 1px solid #000;
}
}
image.png
給單元格添加after偽元素并添加文字內容：
#diagonal-left {
position: relative;
height: 100px;
&::after {
content: "占位/占位";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(23deg);
transform-origin: top left;
text-align: right;
}
}
image.png
接下來把其他的文字處理好就ok：
<td id="diagonal-left">
<div style="position: absolute; top: 10px; right: 10px; ">占位</div>
<div style="position: absolute; bottom: 10px; left: 10px; ">占位</div>
</td>
image.png
