ドキュメントを挿入するときに、表の対角線を使用する必要がある場合があります。一般的な方法は、画像を使用して対角線を描画することです。これは html+css を使用して実現できますか?答えは「はい」です。テーブルの対角線をシミュレートしましょう。
境界線を使用して対角線をシミュレートします。DIV の境界線が十分な幅に設定され、異なる色が定義されている場合、隣接する 2 つの境界線の交点が対角線になることがわかっています。この原理を知っていると、border-left と border-top を使用してスラッシュの効果をシミュレートできます。
まず構造体を作成しましょう。
<div class="out">
<b>カテゴリ</b>
<em>名前</em>
</div>
<div class="out"> を対角コンテナとして使用し、スラッシュ スタイルを設定します。キー コードは次のとおりです。
。外{
border-top:40px #D6D3D6 Solid;/*上枠の幅は表の最初の行の高さと同じです*/
width:0px;/*コンテナの幅を0にしておきます*/
height:0px;/*コンテナの高さを0にしておきます*/
border-left:80px #BDBABD Solid;/*左の境界線の幅は、表の最初の行の最初のセルの幅と同じです*/
Position:relative;/*内部の 2 つのサブコンテナを絶対配置にします*/
タグ
と <em> タグは 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 のみをテストしており、他のブラウザはテストされていません。