8月7日から8月9日に書いた「テーブル内のセルに斜線を付ける」の一般化で、任意のブロック要素に対角線を付けるテンプレートです。Windows7 32bit + Firefox40、Chrome43、IE10で動作確認しました。

ブラウザがJavaScriptのDOMに対するgetBoundingClientRectメソッドと、CSS3のtransform属性を使える前提。前者でブロック要素の縦・横サイズを取得し、後者に渡すmatrixパラメータ（3つ目のcの値）を計算して対角線を引きます。今回は省きましたが対角線以外の斜線も、matrixのcパラメータを変化させれば引けます。傾きを小さくするには絶対値を減らす（height / widthの分子を減らす）、という風に。matrixパラメータの詳細は下記を参考にして下さい。


四隅のうち左下は微妙に対角線がズレていて、線幅まで計算に入れてない、またはブロックを入れ子にしているせいな気がしますが、現状そこまで厳密な用途はないので未処理です。matrixパラメータを出す際のheightとwidthを調整すればいいかもしれません。

下記はインラインフレーム内のサンプル。その下がHTML、CSS、JavaScriptのソースです。別ウィンドウで開く場合はこちら。CSSにはベンダープレフィクスを付けてないので、それを付ければ古いブラウザでも動作するのがあるかと。ソースの後に動作時の画像が数点あります。

loading from Bitbucket...loading from Bitbucket...loading from Bitbucket...

以下、動作確認時の画像。上からChrome43（冒頭の再掲）、Firefox40、IE10です。「対角線を引く」ボタンを押すたび、ランダムな色で線が重ねられます。


ブラウザがJavaScriptのgetBoundingClientRectに未対応だと、下のようにメッセージが出ます。CSS3のtransformに未対応の場合の処理は入れ忘れたので、その際はたぶんエラーになります^^;