如何创建从任何给定单元格的左下角到右上角的对角线？
得到这个
<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>
显示这个
解决方法
我不知道是否是最好的方式,但我不能用CSS来做.我的答案是在jQuery中：
$(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),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旋转.我认为这是一个更好的工作(线条渲染更好)：
(使用-sand-transform是为IE6,所以使用是可选的.)
EDIT2：
最后一个版本不支持IE7-IE8(似乎-sand-transform仅适用于CSS样式,而不是JavaScript编写的样式).我制作了与旧版浏览器兼容的版本：
