テーブルセル内に対角線を作成する方法は？

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> 

が最善の方法である場合、私は知らないが、私はCSSでそれを行うことはできません。この

Answer 1

を表示するために取得します。私の答えは、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の境界線で作られた三角形のレンダリングの品質に満足していませんでした。私は、これは、より良い作品だと思います（とラインは、より良いレンダリングされている）：

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

（。-sand-transformを使用すると、IE6のためなので、それは使うオプションです）

EDIT2： 最後バージョンはIE7-IE8をサポートしていません（-sand-transformはCSSスタイルでのみ動作し、JavaScriptで書かれたスタイルでは動作しません）。それが可能である

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

Answer 2

：私は古いブラウザとの互換性を持つバージョンを作りました。 Try my solution：私は、線形グラデーションを使用して、簡単な、CSSのみのソリューションを見つけた

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

Answer 3

は：

あなたは、単に直線勾配を定義することにより、斜めのラインを指定することができます。線形勾配は数ストップカラーになります。開始と2番目の色は同じです（=勾配なし）。最後と最後の色についても同じことが言えます。 それらの間の色（約50％）が対角線に使用されます。

あなたはここでそれをテストすることができます。

td 
 
{ 
 
\t border: 1pt solid black; 
 
} 
 

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

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

 
td.diagonalCross 
 
{ 
 
\t position: relative; 
 
\t 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 
 
{ 
 
\t content:  ""; 
 
\t display:  block; 
 
\t position: absolute; 
 
\t width:  100%; 
 
\t height:  100%; 
 
\t top:   0; 
 
\t left:  0; 
 
\t z-index:  -1; 
 
\t 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でテストしました。それらはすべてOKですが（他のIEと比較してIEではやや異なっています）。