對齊其中有文字的五角形形狀

我正在試圖製作一個包含導航堆棧的酒吧。對齊其中有文字的五角形形狀

例如：在這裏，我的客戶端頁面

上，然後當我點擊一個客戶的名字，我去一個新的頁面，並將其添加到酒吧：

這是我到目前爲止有：http://jsbin.com/bahaqebiga/edit?html,css,js,output

所有需要做的是改變形狀，我會想一些如何管理Z指數，因爲下一個箭頭應該總是在前一個箭頭的下方。我已經嘗試過使用svg，但由於文本原因無法正確完成，並且出現了一個我無法擺脫的奇怪填充，並且也使用了純html/css，但也失敗了。

注意：絕對位置不能使用

任何想法？

謝謝

來源

2016-12-06 Apswak

你可以有一個純粹的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>

來源

2016-12-06 00:29:43 Dekel

不錯！非常感謝 – Apswak

對齊其中有文字的五角形形狀

回答

相關問題