如何创建带有空心V形的CSS进度条？

我需要创建一个V形风格的进度条，我可以使用实体，但我只希望有活动的实心步骤和非活动的空心步骤。我该怎么做？这就是我目前所拥有的。有什么办法可以做到这一点吗

<div class='grid'>
  <div class='step'></div>
  <div class='step'></div>
  <div class='step'></div>
  <div class='step'></div>
</div>

以上是一个简短的例子。下面是我的完整CSS的提琴：

---

您所能做的就是在网格周围放置一个与箭头匹配的边框。我还将显示更改为flex，并将对齐设置为

间距

，以确保箭头从头到尾移动

.grid{
宽度：660px；
显示器：flex；
证明内容：之间的空间；
边界半径：10px 10px 0；
边框：1px实心#002453；
}
/*-----步骤1------*/
.第1步{
宽度：100px；
高度：40px；
位置：相对位置；
背景：#002453；
边界半径：10px 0px 0px 0px；
颜色：白色；
}
.第一步：在{
内容：“；
位置：绝对位置；
右：-20px；
底部：0；
宽度：0；
身高：0；
左边框：20px实心#002453；
边框顶部：20px实心透明；
边框底部：20px实心透明；
}
/*-----/步骤1-----*/
/*-----步骤2------*/
.步骤2{
宽度：100px；
高度：40px；
位置：相对位置；
背景：#002453；
颜色：白色；
}
.第二步：之后{
内容：“；
位置：绝对位置；
左：0；
底部：0；
宽度：0；
身高：0；
左边框：20px纯白；
边框顶部：20px实心透明；
边框底部：20px实心透明；
}
.第二步：之前{
内容：“；
位置：绝对位置；
右：-20px；
底部：0；
宽度：0；
身高：0；
左边框：20px实心#002453；
边框顶部：20px实心透明；
边框底部：20px实心透明；
}
/*-----/第2步------*/
/*----步骤3----*/
.步骤3{
宽度：100px；
高度：40px；
位置：相对位置；
背景：#002453；
颜色：白色；
}
.第三步：之后{
内容：“；
位置：绝对位置；
左：0；
底部：0；
宽度：0；
身高：0；
左边框：20px纯白；
边框顶部：20px实心透明；
边框底部：20px实心透明；
}
.第三步：之前{
内容：“；
位置：绝对位置；
右：-20px；
底部：0；
宽度：0；
身高：0；
左边框：20px实心#002453；
边框顶部：20px实心透明；
边框底部：20px实心透明；
}
/*----第三步--*/
/*-----步骤4------*/
.步骤4{
宽度：100px；
高度：40px；
位置：相对位置；
背景：#002453；
边界半径：0px 10px 0px 0px；
颜色：白色；
}
.第四步：之后{
内容：“；
位置：绝对位置；
左：0；
底部：0；
宽度：0；
身高：0；
左边框：20px纯白；
边框顶部：20px实心透明；
边框底部：20px实心透明；
}
/*-----/step4-----*/

Hi，您能描述一下“非活动”步骤与活动步骤的区别吗，因为我不清楚这是如何改变/发出信号的。谢谢。例如，非活动将只是一个轮廓，而活动将是一个实心填充。现在，如果你看我的小提琴，它都是实心的。我想知道我是否必须使用SVG:-/active将是我当前的进展步骤。如果我能锁定CSS，我就可以用JQuery控制一切。我遇到的问题是不活动的CSS表示。

.grid {
  width: 660px;
  display: grid;
  grid-auto-flow: column;
}


.step {
  width: 100px;
  height: 40px;
  position: relative;
  background: #002453;
  color: white;
}

.step:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
.step:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid #002453;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}