努力使的div與引導和SCSS三角形

Question

image1

我試圖在引導3周的div就像這個image.Now，我的代碼但之後的前/問題是，元素不會按照自己的div和文本進行縮放。我需要讓它們響應，因此在小屏幕中，它們會一個一個放在另一個下面。這裏是與引導程序和scss代碼的鏈接：http://www.bootply.com/qYUhoNymFI

Answer 1

scss代碼未應用在你的鏈接中，所以我在最後添加了經典的CSS來向你展示創建三角形的方式。

這裏是我添加的代碼：

.shipping, 
.support { 
    position: relative; 
    background: #d7b789; 
    color: white; 
    text-align: center; 
} 
.returns { 
    position: relative; 
    background: black; 
    color: white; 
    text-align: center; 
} 
.shipping:before, 
.returns:before, 
.returns:after, 
.support:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
    border: solid 32px transparent; 
    width: 32px; 
    height: 32px; 
} 
.returns:before { 
    left: 0px; 
    border-left-color: white; 
} 
.returns:after { 
    right: 0px; 
    border-right-color: white; 
} 
.shipping:before { 
    right: -64px; 
    border-left-color: #d7b789; 
    z-index: 1; 
} 
.support:after { 
    left: -64px; 
    border-right-color: #d7b789; 
    z-index: 1; 
} 

Bootply

我在這裏做的是設置背景顏色相匹配的例子。 然後我設置了一個width，height（等於父div的height的一半）和border到before和after我們想要的，並設置其border-color到transparent。 在每個'before和after上，然後在想要啓動三角形的一側定義一個border-color。 然後，您必須將left和right放置在版權元素上，以將它們放置在您想要的位置。

通知的z-index我的第一個和最後一個塊添加所以你一定三角形過來中間塊

現在你可以翻譯這SCSS優化代碼。 例如，爲多個transform前綴創建一個混合，這樣就不必在任何地方重複它們。 添加一個變量爲div的height（64px中的例子），並使用它也爲border-width（$height/2），並使用該變量太更換left: -64px;和right: -64px;。