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

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

这是一个工作示例( react 后):

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