は、ブートストラップとSCSSと三角形の形状でdivを作ろうとし

Question

image1

私はこのimage.Nowで、私は、コードを持っているように、ブートストラップで3つのdivを作るしようとしていますが、問題は、その前/後です要素は独自のdivとテキストで縮尺されていません。小さな画面では、小さな画面では別の場所に移動します。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

私はここに行っていることの例に合わせて、背景色を設定することです。ここでは

私が追加されたコードです。 は、それから私は、私たちが望むbeforeとafterにwidth、height（親divのheightの半分に等しい）とborderを設定し、そのborder-colortransparentに設定してください。 各 'beforeとafterには、三角形を開始する側にborder-colorを定義します。 次に、権利要素にleftとrightを配置して、必要な場所に配置する必要があります。

お知らせあなたは今、あなたは、コードを最適化するために、SCSSするためにこれを変換することができ三角形がミドルブロック

の上に来る確信しているので、私は最初と最後のブロックに追加z-index。 たとえば、プレフィックスが複数のtransformのミックスインを作成して、どこでも繰り返す必要はありません。 はdivのheight（例では64px）のための変数を追加し、border-width（$height/2）のためにも、それを使用すると、あまりにもこの変数を使用してleft: -64px;とright: -64px;を交換してください。