Jquery 如何在表格单元格中创建对角线？

如何创建从任何给定单元格的左下角到右上角的对角线

得到这个

<table>
    <tr>
        <td class="crossOut">A1</td>
        <td>B1</td>
    </tr>
    <tr>
        <td>A2 Wide</td>
        <td class="crossOut">B2<br/>Very<br/>Tall</td>
    </tr>
</table>

A1
地下一层
A2宽
B2
非常高

来证明这一点

---

我不知道这是否是最好的方法，但我不能用CSS做到这一点。我的答案是jQuery：

jQuery代码：

$(function(){
    $('.crossOut').each(function(i){
        var jTemp = $(this),
            nWidth = jTemp.innerWidth(),
            nHeight = jTemp.innerHeight(),
            sDomTemp = '<div class="child black-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+nHeight+'px; "></div>';

        sDomTemp += '<div class="child white-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+(nHeight-1)+'px;"></div>';

        jTemp.append(sDomTemp);
    });
});

$（函数（）{
$（'.crossOut'）。每个（函数（i）{
var jTemp=$（此），
nWidth=jTemp.innerWidth（），
nHeight=jTemp.innerHeight（），
sDomTemp=''；
sDomTemp+=''；
jTemp.append（sDomTemp）；
});
});

好的是，它适用于任意宽度和高度的表格单元格

编辑：

我对绘制三角形的质量不满意​​使用CSS边框，所以我使用了CSS旋转。我认为这是一个更好的作品（线条渲染得更好）：

（使用是针对IE6的，因此它的使用是可选的。）

Edit2: 上一个版本不支持IE7-IE8（似乎-sand转换只在CSS样式中工作，而不在JavaScript编写的样式中工作）。我制作了一个与旧浏览器兼容的版本：

这是可能的：

.line{
宽度：200px；
高度：50px；
边框：1px实心#中交；
利润率：10px；
填充：10px；
位置：相对位置；
}
.我{
位置：绝对位置；
左：0；
排名：0；
身高：100%；
宽度：100%；
z指数：-1；
}
排队！

我发现了一个使用线性渐变的简单、仅限于CSS的解决方案：

可以通过定义线性渐变来简单地指定对角线。线性渐变变为几种停止颜色。起始颜色和第二种颜色相同（=无渐变）。最后一种颜色和前一种颜色也是如此。 它们之间的颜色（约50%）用于对角线

您可以在此处进行测试：

td
{
边框：1件纯黑；
}
对角线上升
{
背景：线性梯度（到右下角，#ffffffff 0%，#ffffff 49.9%，#000000 50%，#000000 51%，#ffffffff 51.1%，#ffffffff 100%）；
}
对角线下降
{
背景：线性梯度（至右上角，#FFFFFFFF 0%，#ffffff 49.9%，#000000 50%，#000000 51%，#FFFFFFFF 51.1%，#ffffff 100%）；
}
斜交
{
位置：相对位置；
背景：线性梯度（至右下角，rgba（0,0,0,0）0%，rgba（0,0,0,0）49.9%，rgba（0,0,0,1）50%，rgba（0,0,0,1）51%，rgba（0,0,0,0）51.1%，rgba（0,0,0）100%）；
}
td.对角交叉：之后
{
内容：“；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：-1；
背景：线性梯度（至右上角，#FFFFFFFF 0%，#ffffff 49.9%，#000000 50%，#000000 51%，#FFFFFFFF 51.1%，#ffffff 100%）；
}

aabcabcdefghijklmnopqrstuvxyzabcdefghijklmnopqrstuvxyz
qaywsxedcrfvtgbzhnujmikolp

尝试使用45度对角线的CSS背景图像并将其拉伸。您使用表格布局而不是div布局有什么特殊原因吗？表格是一种PITA风格。页面非常像电子表格，所以表格很容易适应。如果可以用divs更容易地解决这一问题，那也没问题。拉伸背景图像会根据单元格大小/比率而失真。这会缩放大“单元格”的线条厚度。这是一个好主意，当然，百分比可能太小或太大，这取决于单元格的大小，但就我而言，它看起来很完美。用一行CSS解决了我的问题。明亮的你能让JSFIDLE从左上角开始到右下角结束吗？谢谢

.crossOut .child{
    position:absolute; 
    width:0; 
    height:0;
    border-style:solid;
}
.crossOut .black-triangle{
    z-index:-2;
    border-color: transparent black white white;
}
.crossOut .white-triangle{
    border-color: transparent white white white;
    z-index:-1;
}

$(function(){
    $('.crossOut').each(function(i){
        var jTemp = $(this),
            nWidth = jTemp.innerWidth(),
            nHeight = jTemp.innerHeight(),
            sDomTemp = '<div class="child black-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+nHeight+'px; "></div>';

        sDomTemp += '<div class="child white-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+(nHeight-1)+'px;"></div>';

        jTemp.append(sDomTemp);
    });
});

.line {
    width: 200px;
    height: 50px;
    border: 1px solid #cccccc;
    margin: 10px;
    padding: 10px;
    position: relative;
}

.me {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}


<div class="line">LINE!
     <img src="http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png" class="me" />
</div>