html或css中的斜线？

我想做一张这样的桌子

---

是否可以在表中添加斜对角边框？

您可以添加变换原点属性并更改变换值

div.line
{
    position: relative;
    z-index: 1;
    left: -61px;
    width: 423px;
    height: 1px;
    background-color: #000;
    transform: rotate(45deg);
}

检查小提琴：

---

如果您正在寻找其他内容，请告诉我，使用js&css是可能的。请检查下面的代码

<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="myTextArea"></div>    
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

<style>
html, body { 
  margin: 0;
  padding: 0;
}

#myCanvas {
  padding: 0;
  margin: 0;
  width: 200px;
  height: 100px;
}

#myTextArea {
  position: absolute;
  left: 0px;
  right: 0;
  height: 102px;
  width: 202px;
  background: rgba(255,255,255,0);
  padding: 0;
  margin: 0;
}
</style>


`

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.strokeStyle=“红色”；
ctx.moveTo（0100）；
ctx.lineTo（200,0）；
ctx.stroke（）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.stroke（）；
html，正文{
保证金：0；
填充：0；
}
#我的画布{
填充：0；
保证金：0；
宽度：200px；
高度：100px；
}
#myTextArea{
位置：绝对位置；
左：0px；
右：0；
高度：102px；
宽度：202px；
背景：rgba（255255,0）；
填充：0；
保证金：0；
}
`

您可以使用以下任一方法产生这种倾斜的内边框效果，但这两种方法都需要根据表格单元格的高度和宽度调整角度（倾斜/渐变）

注意：当单元尺寸为动态/自动时，这可能不是最佳选项（我也想不出其他更好的选项），因为角度需要修改

选项1:对伪元素使用倾斜变换

表格，
tr，
运输署{
边框：1px实心；
边界塌陷：塌陷；
}
运输署{
display:inline block；/*如果没有此选项，在FF中似乎无法工作*/
位置：相对位置；
溢出：隐藏；
高度：100px；
宽度：200px；
文本对齐：居中；
线高度：100px；/*用于垂直定心*/
}
运输署：在{
位置：绝对位置；
内容：''；
顶部：0px；
左：0px；
身高：100%；
宽度：100%；
边框：1px纯红；
-webkit变换：skewX（63度）；
-moz变换：skewX（63度）；
变换：skewX（63度）；
-webkit变换原点：左下角；
-moz变换原点：左下角；
变换原点：左下角；
}

试验
试验
试验
试验
试验
试验

基于解决方案，但角度不是硬编码的：

表：第n种类型（1）td{
背景图像：线性梯度(
右上角，
白人48%，
黑色
白人52%
);
}
表：第n种类型（2）td{
背景图像：线性梯度(
右上角，
木瓜鞭钙（50%-1px），
黑色
木瓜鞭钙（50%+1px）
);
}
/*用于测试*/
桌子{
边界塌陷：塌陷；
边缘顶部：1米；
边缘底部：1米；
}
td:N个孩子（单数）{
宽度：10em；
}
td:n个孩子（偶数）{
宽度：20em；
}

狭窄的
宽阔的
狭窄的
宽阔的
狭窄的
宽阔的
狭窄的
宽阔的

另一种方法是使用SVG，因为它可以轻松地扩展到容器的大小

示例：

div{
位置：相对位置；
显示：内联块；
宽度：100px；
高度：50px；
边框：1px实心#000；
}
.l{宽度：200px；}
.xl{宽度：300px；}
svg{
位置：绝对位置；
宽度：100%；
身高：100%；
}

---

如果这是有用的，我为此创建了一个简单的HTML+CSS解决方案，只需要对单元格高度和颜色进行少量定制：

。平衡{
宽度：100%；
边框：1px实心#999；
边界权：无；
边框底部：无；
背景#8bc34a；
}
.均衡td{
右边框：1px实心#999；
边框底部：1px实心#999；
}
.均衡td{
位置：相对位置；
高度：200px；
}
.sup{
显示：块；
位置：相对位置；
宽度：50%；
浮动：左；
垫底：15%；
线高：100%；
文本对齐：居中；
z指数：1；
}
.inf{
显示：块；
位置：相对位置；
宽度：50%；
浮动：左；
垫面：15%；
线高：100%；
文本对齐：居中；
z指数：1；
}
.td：：之后{
内容：“；
位置：绝对位置；
z指数：0；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（255255,5）；
背景尺寸：封面；
剪辑路径：多边形（100%0%，0%0%，0%100%）；
}

1.
2.
1.
2.
1.
2.
1.
2.

您可以通过定义线性渐变来简单地指定对角线

表td{
边框：1px实心#ccc；
}
/*这将被隐藏，只是为了使实线笔直，而不是虚线*/
斜交{
位置：相对位置；
背景：线性梯度（到右上角，#FFFFFFFF 0%，#ffffff 49.9%，#000000 50%，#000000 51%，#FFFFFFFF 51.1%，#ffffff 100%）！重要；
背景色：透明；
背景图像：无！重要；
}
/*真正的对角线*/
td.对角交叉：之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：-1；
/*上升对角线*/
背景：线性梯度（到右下角，白色，白色48%，黑色49%，黑色51%，白色52%，白色）！重要；
/*下降对角线*/
背景：线性渐变（右上角，白色，白色48%，黑色49%，黑色51%，白色52%，白色）！重要；
}

名称
身份证件
年龄
纳韦诺
ID-123
霍
ID-223
李
ID-221
分钟
ID-231

实际上，我正在寻找与图中示例相同的表格边框。我想在表格单元格中使用斜线框。@DatzMe好的，做了很多工作并更新了我的答案，现在检查一下。你可以在背景中使用线性渐变。但IE 9及更低版本不支持渐变。但是ang