Web ページの制作: div+css を使用してテーブルの対角線をシミュレートします

著者：Eve Cole 更新時間：2009-06-12 17:24:05

ドキュメントを挿入するときに、表の対角線を使用する必要がある場合があります。一般的な方法は、画像を使用して対角線を描画することです。これは html+css を使用して実現できますか?答えは「はい」です。テーブルの対角線をシミュレートしましょう。

境界線を使用して対角線をシミュレートします。DIV の境界線が十分な幅に設定され、異なる色が定義されている場合、隣接する 2 つの境界線の交点が対角線になることがわかっています。この原理を知っていると、border-left と border-top を使用してスラッシュの効果をシミュレートできます。

まず構造体を作成しましょう。

カテゴリ
名前

を対角コンテナとして使用し、スラッシュスタイルを設定します。キーコードは次のとおりです。
。外{
border-top:40px #D6D3D6 Solid;/*上枠の幅は表の最初の行の高さと同じです*/
width:0px;/*コンテナの幅を0にしておきます*/
height:0px;/*コンテナの高さを0にしておきます*/
border-left:80px #BDBABD Solid;/*左の境界線の幅は、表の最初の行の最初のセルの幅と同じです*/
Position:relative;/*内部の 2 つのサブコンテナを絶対配置にします*/

タグ
とタグは 2 つのカテゴリを設定するために使用され、それぞれをブロック構造に設定します。これは、親コンテナーが相対的な位置を設定しているためです。絶対位置に設定しますので、指定したい位置にオフセットすることができます。

b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}

このような対角線をシミュレーションする。原理を知っていれば、たくさんの面白いことに変えることができます。
この対角線シミュレーション方法の欠点は次のとおりです。

1.
幅と高さがわかっている必要があります。

2. 幅と高さの長さがあまりにも異なっていてはなりません。効果を確認するために、幅を高さの数倍にしてみることができます。

. また、斜線の色は設定できません。
もう 1 つの注意: 上記のコードは ie6 と ff3 のみをテストしており、他のブラウザはテストされていません。