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

Question

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

得到这个

<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>

显示这个

Answer 1

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

http://jsfiddle.net/zw3Ve/13/

$(function(){
    $('.crossOut').each(function(i){
        var jTemp = $(this),
            nWidth = jTemp.innerWidth(),
            nHeight = jTemp.innerHeight(),
            sDomTemp = '<div style="position:absolute; border-color: transparent black white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+nHeight+'px; z-index:-2"></div>';

        sDomTemp += '<div style="position:absolute; border-color: transparent white white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+(nHeight-1)+'px; z-index:-1"></div>';

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

或

http://jsfiddle.net/zw3Ve/16/（带有 CSS 类清理器）

CSS 部分：

.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;
}

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);
    });
});

好处是它适用于表格单元格的任何宽度和高度。

编辑：

我对用 CSS 边框制作的三角形的渲染质量不满意，所以我使用了 css-rotation。我认为这是一部更好的作品（而且线条渲染得更好）：

http://jsfiddle.net/zw3Ve/21/

（使用-sand-transform是针对IE6的，所以使用是可选的。）

编辑2： 最新版本不支持 IE7-IE8（似乎 -sand-transform 仅适用于 CSS 样式，不适用于 JavaScript 编写的样式）。我做了一个兼容旧浏览器的版本：

http://jsfiddle.net/zw3Ve/23/

Answer 2

我找到了一个使用线性渐变的简单的纯 CSS 解决方案：

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

你可以在这里测试它：

td
{
	border: 1pt solid black;
}

td.diagonalRising
{
	background: linear-gradient(to right bottom, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

td.diagonalFalling
{
	background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

td.diagonalCross
{
	position:   relative;
	background: linear-gradient(to right bottom, 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,0) 100%);
}

td.diagonalCross:after
{
	content:     "";
	display:     block;
	position:    absolute;
	width:       100%;
	height:      100%;
	top:         0;
	left:        0;
	z-index:     -1;
	background:  linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

<table>
<tr><td>a</td><td class="diagonalRising">abc</td><td class="diagonalFalling">abcdefghijklmnopqrstuvwxyz</td><td class="diagonalCross">abcdefghijklmnopqrstuvwxyz<br>qaywsxedcrfvtgbzhnujmikolp</td></tr>
</table>

不幸的是，您几乎无法指定线宽。我已经用 Firefox、Chrome、Opera 和 Internet Explorer 对其进行了测试。在所有这些中看起来都不错（但在 IE 中与其他版本相比略有不同）。

Answer 3

这是可能的。 Try my solution:

.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>