基于CSS3线性梯度解决方案，但Angular 未硬编码：
第一个

另一种方法是使用SVG，因为它可以很容易地缩放到容器的大小。

范例：

第一个

您可以使用以下方法之一产生这种倾斜的内边框效果，但这两种方法都需要根据表格单元格的高度和宽度调整Angular （倾斜/渐变）。
注意：当单元格尺寸是动态/自动的，因为Angular 需要修改时，这可能不是最好的选择（我也想不出任何其他更好的选择）。

**选项1：**对伪元素使用倾斜转换

第一个

**选项2：**在背景中使用线性渐变（IE9及更低版本不支持）

第一次

如果这是有用的，我创建了一个普通的HTML + CSS解决方案，它只需要对单元格的高度和颜色进行少量的定制：
https://codepen.io/davoscript/pen/GdWMwV
第一个
希望能帮上忙。

您可以定义缐性渐层来指定对角缐。
第一个
JS小提琴链接here。

可以使用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>

`

可以添加transform-origin属性并更改translate值

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

检查小提琴：http://jsfiddle.net/LWAKn/123/

• 让我知道你是否在寻找其他 *