0

我一直在尝试为锦标赛支架系统制作“连接线 - 树结构”。

然而，这比我想象的更令人不安。我的目标是用一条线连接这些框，例如http://gyazo.com/4ea425163a8f3e6901b464085421c449，但我不想使用任何图像。

我认为这可以通过边界或其他方式完成，但我不确定。我现在的概念看起来不太好，我想知道是否有人可以就我应该尝试的内容提供一些帮助。

http://jsfiddle.net/zet5uh7f/1/

#spacer {
    padding: 5px;
}
#connecter { 
     border-left: 1px solid black;
}

我想我必须以某种方式将border:left#connector 上的它向右移动，并在垫片上添加一些东西以使其看起来正常。正在使用border您推荐的东西吗？

4

1 回答 1

0

jsFiddle

全屏jsfiddle

仅使用 css3 解决！

在此处输入图像描述 html

<div class="test">
    <table border="1" cellspacing="1" cellpadding="1">
        <tbody>
            <tr>
                <td colspan="2"><strong>Round 1</strong>

                </td>
                <td colspan="2"><strong>Round 2</strong>

                </td>
                <td colspan="2"><strong>Round 3</strong>

                </td>
                <td colspan="2"><strong>Round 4</strong>

                </td>
                <td colspan="2"><strong>Round 5</strong>

                </td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td rowspan="1"></td>
                <td rowspan="1" class="connecter connecter1"></td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td rowspan="3"></td>
                <td rowspan="3" class="connecter connecter2"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td rowspan="7"></td>
                <td rowspan="7" class="connecter connecter3"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td rowspan="1"></td>
                <td rowspan="1" class="connecter connecter1"></td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td rowspan="15"></td>
                <td rowspan="15" class="connecter connecter4"></td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td rowspan="1"></td>
                <td rowspan="1" class="connecter connecter1"></td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td rowspan="3"></td>
                <td rowspan="3" class="connecter connecter2"></td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td rowspan="1"></td>
                <td rowspan="1" class="connecter connecter1"></td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td rowspan="1"></td>
                <td rowspan="1" class="connecter connecter1"></td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td rowspan="3"></td>
                <td rowspan="3" class="connecter connecter2"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td rowspan="7"></td>
                <td rowspan="7" class="connecter connecter3"></td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td rowspan="1"></td>
                <td rowspan="1" class="connecter connecter1"></td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td rowspan="1"></td>
                <td rowspan="1" class="connecter connecter1"></td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td rowspan="3"></td>
                <td rowspan="3" class="connecter connecter2"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td rowspan="1"></td>
                <td rowspan="1" class="connecter connecter1"></td>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td id="team"><span class="dash-back"> -----</span>Team<span class="dash-front"> -----</span> -----</span>
                </td>
                <td width="20" id="spacer"></td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
                <td colspan="2">&nbsp;</td>
            </tr>
        </tbody>
    </table>
</div>

css

table {
            width: 60%;
            height: 100%;
        }
        td {
            border: 0px;
            position:relative;
        }
        #team {
            padding: 5px;
            border: 1px solid black;
            z-index:999;
            background:#fff;
        }
        .dash-front {
            position:absolute;
            content:"----------";
            letter-spacing: -2px;
            right:-18px;
            z-index:-999;
        }
        .dash-back {
            position: absolute;
            content: "----";
            letter-spacing: -3px;
            left: -15px;
            z-index: -999;
        }
        #spacer {
            padding: 5px;
        }
        .connecter {
            border-left: 1px solid black;
            /*transform:translateX(18px) scaleY(1.65);*/
        }
        td.connecter1{
            transform-origin: center;
            transform:translateY(1px) translateX(18px) scaleY(2.05);
        }
        td.connecter2{
            transform-origin: center;
            transform:translateY(1px) translateX(18px) scaleY(1.34);
        }
        td.connecter3{
            transform-origin: center;
            transform:translateY(1px) translateX(18px) scaleY(1.15);
        }
        td.connecter4{
            transform-origin: center;
            transform:translateY(2px) translateX(18px) scaleY(1.07);
        }
        #connecter:after {
            /*content:"------";*/
            letter-spacing: -2px;
        }
        td:first-child .dash-back{display: none;}
        td:last-child .dash-front{display: none;}
于 2014-10-04T08:55:10.570 回答