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宽度