html或css中的倾斜对角线? [英] Slanted diagonal line in html or css?
本文介绍了html或css中的倾斜对角线?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想创建一个这样的表
是否可以在表格中添加倾斜对角线边框?
解决方案
根据 CSS3线性渐变解决方案,除了角度不是硬编码:
table:nth-of-type(1)td {background-image:linear-gradient右侧,白色48%,黑色,白色52%);}表:n类型(2)td {背景图像:线性梯度(右上,番木瓜计算(50%-1px) calc(50%+ 1px));} / *用于测试* / table {border-collapse:collapse; margin-top:1em; margin-bottom:1em;} td:nth-child(odd){width:10em;} td:nth-child(even){width:20em;}
pre class =snippet-code-html lang-html prettyprint-override> < table border =1> < tbody> < tr> < td> Narrow< / td> < td> Wide< / td> < / tr> < tr> < td> Narrow< / td> < td> Wide< / td> < / tr> < / tbody>< / table>< table border =1> < tbody> < tr> < td> Narrow< / td> < td> Wide< / td> < / tr> < tr> < td> Narrow< / td> < td> Wide< / td> < / tr> < / tbody>< / table>
I want to make a Table like this
is it possible to add a slanted diagonal border in table?
解决方案
Based on CSS3 linear-gradients solution except that the angle is not hard coded:
table:nth-of-type(1) td {
background-image: linear-gradient(
to top right,
white 48%,
black,
white 52%
);
}
table:nth-of-type(2) td {
background-image: linear-gradient(
to top right,
papayawhip calc(50% - 1px),
black,
papayawhip calc(50% + 1px)
);
}
/* for testing */
table {
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
}
td:nth-child(odd) {
width: 10em;
}
td:nth-child(even) {
width: 20em;
}
<table border="1">
<tbody>
<tr>
<td>Narrow</td>
<td>Wide</td>
</tr>
<tr>
<td>Narrow</td>
<td>Wide</td>
</tr>
</tbody>
</table>
<table border="1">
<tbody>
<tr>
<td>Narrow</td>
<td>Wide</td>
</tr>
<tr>
<td>Narrow</td>
<td>Wide</td>
</tr>
</tbody>
</table>
这篇关于html或css中的倾斜对角线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文