テキストが入っている五角形の形状を整える

Question

私はナビゲーションスタックを保持する棒を作ろうとしています。例えば

：

：ここで私は、クライアント上でクリックしたときに、私は、クライアントのページ

と私は新しいページに移動し、それはバーに追加名前ここで

は、私がこれまで持っているものです。必要なことhttp://jsbin.com/bahaqebiga/edit?html,css,js,output

すべてがあります形状の変化と私は、次の矢印としてZインデックスを管理する方法のいくつかは、常に前のものの下にあるべきだと思います。私はsvgで試してみましたが、テキストのためにそれを正しく取得できませんでした。奇妙な詰め物がなくなり、純粋なhtml/cssもありましたが、失敗しました。

注：絶対位置は使用できません。

ご意見はありますか？

ありがとうございました

Answer 1

あなたには、純粋なCSSソリューションがあります。 svg/jsの必要はありません。

は、矢印を作成するために:after擬似セレクタを使用し、それが位置だに基づいて、それをカラー：

.stack-arrow p:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-left: 25px solid blue; 
    top: 0; 
    margin-left: 14px; 
    position: absolute; 
} 
.stack-arrow:nth-child(2) { 
    background: red; 
} 
.stack-arrow:nth-child(2) p:after{ 
    border-left-color: red; 
} 
.stack-arrow:nth-child(3) { 
    background: green; 
} 
.stack-arrow:nth-child(3) p:after{ 
    border-left-color: green; 
} 
.stack-arrow:nth-child(4) { 
    background: blue; 
} 
.stack-arrow:nth-child(4) p:after{ 
    border-left-color: blue; 
} 

チェックこの例： http://jsbin.com/jusuwihize/1/edit?html,css,js,output

ここでは、（反応後）実施例です。

.top-nav { 
 
    display: flex; 
 
    align-items: center; 
 
    position: absolute; 
 
    top: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    z-index: 1000; 
 
    background-color: #222; 
 
} 
 
.top-nav img { 
 
    cursor: pointer; 
 
} 
 
.stack-arrow { 
 
    cursor: pointer; 
 
    height: 50px; 
 
    color: white; 
 
    background-color: blue; 
 
    font-family: sans-serif; 
 
    padding: 0px 15px; 
 
    margin: 0.5px; 
 
} 
 
.stack-arrow { 
 
    padding-left: 25px; 
 
} 
 
.stack-arrow p:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 25px solid transparent; 
 
    border-bottom: 25px solid transparent; 
 
    border-left: 25px solid blue; 
 
    top: 0; 
 
    margin-left: 14px; 
 
    position: absolute; 
 
} 
 
.stack-arrow:nth-child(2) { 
 
    background: red; 
 
} 
 
.stack-arrow:nth-child(2) p:after{ 
 
    border-left-color: red; 
 
} 
 
.stack-arrow:nth-child(3) { 
 
    background: green; 
 
} 
 
.stack-arrow:nth-child(3) p:after{ 
 
    border-left-color: green; 
 
} 
 
.stack-arrow:nth-child(4) { 
 
    background: blue; 
 
} 
 
.stack-arrow:nth-child(4) p:after{ 
 
    border-left-color: blue; 
 
}

<div class="top-nav" data-reactid=".0"><img height="50px" src="http://skihighstartups.com/wp-content/uploads/2015/07/logo-placeholder.jpg" data-reactid=".0.0"><div class="stack-arrow" data-reactid=".0.1"><p data-reactid=".0.1.0">Clients</p></div><div class="stack-arrow" data-reactid=".0.2"><p data-reactid=".0.2.0">Name</p></div><div class="stack-arrow" data-reactid=".0.3"><p data-reactid=".0.3.0">Extra</p></div></div>