我正在尝试在中心的第一个表格行下添加“CSS 三 Angular 形”,如下图所示:
我尝试在第一行之后使用::after 执行此操作,如前面的示例所示,但定位不正确。
这是没有三 Angular 形的表格
table {
width: 100%;
}
td {
border: 1px solid black;
}
td.content {
height: 100px;
}
<table>
<tr class="header">
<td> # </td>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td colspan="3" class="content"> content </td>
</tr>
</table>
最佳答案
您可能需要在 td 元素而不是行上执行 after。这是一种方法,如下所示。
https://css-tricks.com/snippets/css/css-triangle/
table {
width: 100%;
}
td {
border: 1px solid black;
}
td.content {
height: 100px;
}
.red-triangle:after {
content: '';
position: absolute;
top: 33px;
left: calc(50% - 25px);
width: 0px;
height: 0;
border-top: solid 25px red;
border-left: solid 25px transparent;
border-right: solid 25px transparent;
}
<table>
<tr class="header">
<td> # </td>
<td class="red-triangle"> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td colspan="3" class="content"> content </td>
</tr>
</table>
关于html - 表格行元素下的 CSS 三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40409213/