我想在HTML / CSS / Bootstrap

Question

我正在尝试创建一个类似于上图的进度箭头栏。我从一个引导柱开始，不知道从哪里去。

到目前为止，我的代码看起来像这样：

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

现在它看起来像这样

我不确定如何制作像图像一样的形状，并在点击时应用背景颜色变化。我可以处理过滤效果，但我需要帮助设计条形图。请帮忙！感谢