如何使兩個內聯div頂部邊框傾斜？

Question

我正在一個網站上有幾個部分在一個頁面上。我想爲每個已經傾斜中間透明箭頭的部分製作一個頂部邊框。我曾嘗試使用2個div並將它們以內聯方式顯示並添加左右邊框。爲了說明我想要完成plz請參閱：Website

我的問題是，邊框看起來都搞砸了，當我調整屏幕的大小時，邊框會改變位置。我使用wordpress和bootstrap來創建頁面。

任何幫助，將不勝感激！

THX

Answer 1

不知道你的代碼是如何樣子，你怎麼想，但這裏有一個樣本，可以讓你開始，你可以修改代碼以滿足您的需求。

HTML

<div class="parent-div-border"> 
    <div class="down-arrow"> 
    </div> 
</div> 

CSS

body{ 
    margin: 0 auto; 
} 
.parent-div-border { 
     width:100%; 
     position:relative; 
     border-left:0px solid transparent; 
     border-right:0px solid transparent; 
     border-top:50px solid #1d1d1d; 
} 
.down-arrow { 
     margin 0 auto; 
     border-left:50px solid transparent; 
     border-right:50px solid transparent; 
     border-top:50px solid #1d1d1d; 
     margin-top: 0px; 
     margin-left:45%; 
     float: left; 
} 

工作小提琴：http://jsfiddle.net/yGSYn/1/

Answer 2

這聽起來像您正在尋找這樣的事情......一個DIV雖然。

HTML

<div class="cutout-border"> 
</div> 

CSS

.cutout-border { 
    width: 100%; 
    min-height: 5em; 
    background-color: black; 
} 

.cutout-border:before { 
    content: ""; 
    display: block; 
    margin: 2em auto 2em; 
    position: relative; 
    text-align: center; 
    width: 0; 
    border-top: 5em solid white; 
    border-left: 5em solid transparent; 
    border-right: 5em solid transparent; 
} 

Demo