cssで出来ますか？

質問

お世話になります。

http://mdn.co.jp/webcre/Tips/Vol46/4/index.html

サイトマップをcssで組む参考画面なんですけど、ソースをみて、
同じようにつくってもうまくいきません。
ul#map li.joint { background: url(./images/map_joint.gif) repeat-y top left; }のところの記述がとくに疑問です。

map_joint.gif がTを横にしたもので
map_bottom.gif がLなら

上記のように記述するとTを横にしたものがwebカラーと文字参照・・の間をｙ軸に表示されるので、まっすぐの点線にはならないと思うんですけど・・・。
どうにも理解できないので、ご理解できる方、ご教授いただけないでしょうか？よろしくお願いします。

回答No.2

goldfox · ベストアンサー

＞途中の部分もトになってしまい、「｜」にはならないと思うんですけど

画像のみを表示してみると分かると思うんですが、普通に「ト」形ではなく、下にすごく長いんですね。
ですから、背景として表示すると普通の1行分のところでは背景上揃えのため、上のほうの「ト」だけしか見えなく、
中身（行数）が多いところでは「｜」の部分も見えているという。
「L」のほうも縦部分が長くできています。背景下揃えなので、多少行間が多くても途切れては見えない仕組みですかね。
「UNIX X11カラー140色」の下にさらに数行リストをつけたしてみると、「Webカラーリファレンス」の背景画像が繰り返され「ト」部分が出てきますよ。

お礼

ありがとうございます。そういうふうになっていたんですね。一応、ちょっと応用してもっとスマートに出来るようにしましたが。
わざわざありがとうございました。

回答No.1

gura_

images/map_joint.gif が点線で描かれた「ト」の字の画像で、しかも下が長く、

images/map_bottom.gif　が点線で描かれた「Ｌ」の字の画像だということのようですが。

なかなかうまく作られていますね。

補足

ご回答ありがとうございます。
それで、その「ト」にあたる部分なんですけど、質問文でも書いたとおり、これをy軸にずっと表示されるようにしたら、
トテスト
ト　トテスト
ト　トテスト
トテスト

上のように、途中の部分もトになってしまい、「｜」にはならないと思うんですけど、そのあたりはどうでしょうか？よろしくお願いします。