javascript - 在 HTML/CSS/JS 中创建一个箭头栏

Question

我正在尝试创建一个类似于上图的进度箭头栏。我从一排柱子(四个 col-sm-4)开始，不知道从那里去哪里。

Answer 1

我制作了(灵感来自 this post)一个具有您想要的形状的 div:

.container{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
}

.v-div {
  width: 0;
  height: 0;
  border-bottom: 40px solid transparent;
  border-top: 40px solid transparent;
  border-left: 25px solid #f00;
}

.box{
   height: 80px;
   width: 320px;
   background: red;
}

    <div class="container">
      <div class="box">
      </div>
        <div class="v-div">
        </div>
    </div>

让其中一些重叠，您应该可以开始了!