Javascript 我想用HTML/CSS/Bootstrap制作一个进度条

我正在尝试创建一个进度箭头栏，它看起来与上图类似。我从一列引导列开始，不知道从那里走到哪里

到目前为止，我的代码如下所示：

                    <div class="row">

                        <div class="col-md-10">

                                <div class="col-md-3" id="filter-1">
                                    <div class="panel-body" id="no-padding">

                                            Filter 1 

                                    </div>
                                </div>
                                <div class="col-md-3" id="filter-2">
                                    <div class="panel-body" id="no-padding">

                                            Filter 2

                                    </div>
                                </div>
                                <div class="col-md-3" id="filter-3">
                                    <div class="panel-body" id="no-padding">

                                            Filter 3

                                    </div>
                                </div>
                                <div class="col-md-1" id="filter-4">
                                    <div class="panel-body" id="no-padding">

                                            Filter 4

                                    </div>
                                </div>

                        </div>



                            <div class="col-md-1" id="filter-1">
                                <div class="panel-body" id="no-padding">

                                    Filter 5

                                </div>

过滤器1
过滤器2
过滤器3
过滤器4
过滤器5

现在看起来像这样

---

我不知道如何使形状像图像一样，并在单击时应用背景色更改。我可以处理过滤效果，但我需要帮助与风格的酒吧。请帮忙！谢谢

@CBroe谢谢。我知道如何制作箭头，但我不确定如何使其与其他条重叠，并使其看起来像我附加的图像。第一次击中，一个近乎完美的例子，第二次击中甚至更深入一点。