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>

显示此

enter image description here

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，因此使用它是可选的。）

<强> EDIT2：最后一个版本没有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中与其他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>

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

3 个答案: