对齐其中包含文本的五边形形状

Question

我试图建立一个存放导航堆栈的栏。

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

然后当我点击客户名称时，我会转到一个新页面并将其添加到栏中：

以下是我目前的情况：http://jsbin.com/bahaqebiga/edit?html,css,js,output

所有需要做的就是改变形状，我想一些如何管理z-index，因为下一个箭头应始终位于前一个箭头之下。我曾尝试使用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

这是一个工作示例（反应后）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;