css - 如何正确使用 CSS 边框来可视化值(value)链？

Question

我正在尝试创建一个基于 CSS 的值(value)链:

经过一些研究，我发现我应该使用伪元素。所以我设法添加了它们，但我不能让它们相互重叠。

(不要介意颜色，我将它们用于开发目的。)

li {
  display: inline-block;
  background: #c3c3c3;
  width: 70px;
  padding: 13px 0 10px;
  text-align: center;
  font-family: sans-serif;
}
.chain-link {
  position: relative;
}
.chain-link:after,
.chain-link:before {
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
}
.chain-link:after {
  border-color: rgba(0, 0, 0, 0);
  border-left-color: black;
  border-width: 20px;
  margin-left: 35px;
}
.chain-link:before {
  border-color: rgba(0, 0, 0, 0);
  border-left-color: white;
  border-width: 20px;
  margin-left: -35px;
}
.chain-link:first-child:before {
  border-left-color: red;
}
.chain-link:last-child:after {
  border-left-color: yellow;
}

<ul>
  <li class="chain-link">10</li>
  <li class="chain-link">20</li>
  <li class="chain-link">30</li>
  <li class="chain-link">40</li>
</ul>

有人可以帮忙吗？任何帮助表示赞赏。

Answer 1

演示 - http://jsfiddle.net/7t9ruxgr/

li {
  display: inline-block;
  background: #c3c3c3;
  width: 70px;
  padding: 13px 0 10px;
  text-align: center;
  font-family: sans-serif;
  text-align: center;
}
.chain-link {
  position: relative;
}
.chain-link:after,
.chain-link:before {
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
}
.chain-link:after {
  border-color: transparent transparent transparent #c3c3c3;
  margin-left: 35px;
  border-width: 20px 16px 21px 20px;
  margin-left: 35px;
  z-index: 2;
}
.chain-link:before {
  border-color: rgba(0, 0, 0, 0);
  border-left-color: white;
  border-width: 20px;
  margin-left: -35px;
}

<ul>
  <li class="chain-link">10</li>
  <li class="chain-link">20</li>
  <li class="chain-link">30</li>
  <li class="chain-link">40</li>
</ul>