对齐其中有文字的五角形形状

我正在试图制作一个包含导航堆栈的酒吧。对齐其中有文字的五角形形状

例如：在这里，我的客户端页面

上，然后当我点击一个客户的名字，我去一个新的页面，并将其添加到酒吧：

这是我到目前为止有：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

对齐其中有文字的五角形形状

回答

相关问题