如何创建从任何给定单元格的左下角到右上角的对角线？
得到这个
@H_301_4@<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中：
@H_301_4@$(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部分：
@H_301_4@.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代码：
@H_301_4@$(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编写的样式).我制作了与旧版浏览器兼容的版本：
