div中的虛線/圓形垂直線

Question

我有一個div（父），其中我有三個主要元素： - 從div頂部到中間部分（到標題）的虛線， - 標題， - 虛線從中間到底部的d​​iv

問題是 - 如何使這些虛線（作爲與背景div）工作，並使其高度適應屏幕高度？我有這樣的小提琴： http://jsfiddle.net/5wo01f1y/4/

一塊我的代碼：

 <section id="whatwedo"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-8 col-lg-offset-2"> 
       <div class="dots">&nbsp;</div> 
        <div class="heading"><span>We love</span> <h1>What we do</h1></div> 
        <p>Bakery & Sweets</p> 
       <div class="dots">&nbsp;</div> 
        <i class="fa fa-chevron-down btn-down"></i> 
      </div> 
     </div>   
    </div> 
</section> 

CSS：

@import url(http://fonts.googleapis.com/css?family=Signika+Negative:300,400,600,700&subset=latin-ext); 
@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400,700,700italic&subset=latin-ext); 

body { 
    font-family:'Signika Negative', sans-serif; 
    font-size:14px; 
} 

html, body { 
    min-height:100%; 
    height:100%; 
} 

#whatwedo .heading { 
    display:inline-block; 
    background:#da2027; 
    } 

#whatwedo .heading span { 
    color:#fff; 
    text-transform:uppercase; 
    font-size:36px; 
} 

#whatwedo p { 
    font-family:'Merriweather', sans-serif; 
    color:#fff; 
    font-size:1.7em; 
} 

#whatwedo{ 
    background-color:#da2027; 
    margin-top:0; 
    padding-top: 85px; 
    padding-bottom: 30px; 
    text-align:center; 
    height:100%; 
} 

#whatwedo h1 { 
    color: white; 
    text-transform:uppercase; 
    display:inline-block; 
} 

.btn-down { 
    text-align:center; 
    margin:0 auto; 
    color:#fff; 
} 

.dots { 
    height:100%; 
    margin:0 auto; 
    width:9px; 
    overflow:hidden; 
    background:url('http://s23.postimg.org/8wexsdl07/dot.png') repeat-x; 
} 

我需要使用jquery或有可能是一個simplier破解？

Answer 1

http://jsfiddle.net/Muthukumaru/5k7qLmjs/1/ 使用此CSS的頂點

.heading span:before{ 
content: "\00a0 "; 
background: transparent url("http://s23.postimg.org/8wexsdl07/dot.png") repeat-x scroll 0% 0%; 
width:9px; 
position: absolute; 
top:0px; 
left:49% 
} 

爲底點使用的一類爲p標記像點我用左的<p class="dot1">Bakery & Sweets</p>

.dot1:before{ 
content: "\00a0 "; 
background: transparent url("http://s23.postimg.org/8wexsdl07/dot.png") repeat-x scroll 0% 0%; 
width:9px; 
position: absolute; 
bottom:0px; 
left:49% 
} 

我對準中間：49％。如果你認爲這個值不匹配。設置一個確切的中間使用「calc」像left:calc(50% - 9px);我們正在減小9px寬度