在後臺製作純css3中的垂直拆分器

Question

我想在自制滑塊（如http://theymakeapps.com/users/add）的背景中製作垂直拆分器。怎麼做 ？ 以下是我迄今所做的：

<div id="wrapper"> 
    <div id="dragger"> 
     <div class="rect"></div> 
     <div class="arrow-down"></div> 
    </div> 
    <div id="slide-container"></div> 
</div> 
<br /> 
<span class="drag-caption active" id="hi-caption">Hi, bot</span> <span class="drag-caption" id="keep-caption">Keep sliding...</span> <span class="drag-caption" id="submit-caption">Submit</span> 

而且我的CSS

* { 
    font-family: calibri 
} 
#dragger { 
    width: 10px; 
    padding: 5px 10px 5px 5px; 
} 
.rect { 
    background-color: #ccc; 
    height: 15px; 
    width: 10px; 
} 
.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #ccc; 
} 
#wrapper { 
    z-index: 55; 
    width: 200px; 
    padding: 0 10px; 
} 
#slide-container { 
    background: #dedede; 
    height:2px; 
    border-radius: 1px; 
    margin-top:-18px; 
} 
.drag-caption { 
    padding-right: 20px; 
    color: #d4d4d4; 
    -webkit-transition: color 500ms ease; 
    -moz-transition: color 500ms ease; 
    -ms-transition: color 500ms ease; 
    -o-transition: color 500ms ease; 
    transition: color 500ms ease; 
} 
.drag-caption.active { 
    color: black; 
} 
#submit-caption{ 
    font-weight: bold; 
} 

這裏是jsfiddle。我希望我的分區對齊標題和背景欄。

像這樣：

---|---------|------------| 
    |   |   | 
    Hi bot Keep sliding Submit 

Answer 1

我添加了一個div和兩個span元素和定位使用CSS定位的範圍分隔符。

Demo

Demo 2（如果您不需要最後一個）

Demo 3（可根據您的具體要求）

這裏，我使用CSS定位來定位每個您可以根據您的要求調整左側和右側的權限。

<div id="slide-container"></div> 
<div class="separators"><span></span><span></span></div> <!-- Add this after #slide-container --> 

.separators { 
    position: relative; 
} 

.separators > span:before, 
.separators > span:after{ 
    content: "|"; 
    position: absolute; 
    z-index: -1; 
    color: #DEDEDE; 
} 

.separators > span:nth-of-type(1):before { 
    left: 50px; 
    top: -12px; 
} 

.separators > span:nth-of-type(1):after { 
    left: 100px; 
    top: -12px; 
} 

.separators > span:nth-of-type(2):before { 
    left: 150px; 
    top: -12px; 
} 

.separators > span:nth-of-type(2):after { 
    left: 200px; 
    top: -12px; 
}