用線連接元素

Question

我想用水平白線連接引腳元素和時間線元素。有誰知道如何使用JavaScript和CSS來做到這一點？請參閱以下參考鏈接。

在此先感謝。

• 邁克

http://mikedemar.com/devresources/timeline/example.png

http://mikedemar.com/devresources/timeline/index.html

Answer 1

把標誌的容器overflow: hidden，並使用僞元素來繪製線條：

HTML：

<ul> 
    <li class="handleicon"></li> 
    <li class="handleicon"></li> 
    <li class="handleicon"></li> 
</ul> 

CSS：

ul { 
    position: relative; 
    overflow: hidden; 
    height: 260px; 
} 

.handleicon { 
    position: absolute; 
    width: 33px; 
    height: 50px; 
    background: url(images/handlered.png); 
} 
.handleicon:before { 
    content: ''; 
    width: 1px; 
    height: 400px; 
    background: #fff; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
} 

這裏的小提琴：http://jsfiddle.net/AAPSg/