Richten Sie Fünfeckformen aus, die Text enthalten

Question

Ich versuche, eine Leiste zu machen, die den Navigationsstapel enthält.

Zum Beispiel: Hier bin ich auf der Client-Seite

Und dann, wenn ich auf einen Kunden nenne ich eine neue Seite gehen und es fügt auf der Bar:

Hier

ist das, was ich bisher: http://jsbin.com/bahaqebiga/edit?html,css,js,output

Alles, was getan werden muss, ist Änderung der Form und ich denke, einige, wie man den Z-Index zu verwalten, da der nächste Pfeil immer unter dem vorherigen sein sollte. Ich habe versucht mit Svg aber konnte es nicht richtig wegen des Textes und es war eine seltsame Polsterung, die ich nicht loswerden konnte, und auch mit reinem html/css aber auch gescheitert.

Hinweis: Position absolut kann nicht

Irgendwelche Ideen verwendet werden?

Danke

Answer 1

Sie können eine reine CSS-Lösung dafür haben. Keine Notwendigkeit für Svg/Js.

Verwenden Sie den :after pseudo-Selektor einen Pfeil zu erstellen, und färbt es darauf basierende Position ist:

.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; 
} 

prüft dieses Beispiel: http://jsbin.com/jusuwihize/1/edit?html,css,js,output

Hier ist ein funktionierendes Beispiel (nach reagieren):

.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>