您可以在background中添加 * 条纹 *。
使用线性渐变和%将#ececec颜色限制为1.5%宽度，并添加白色作为填充颜色。

progress {
  border: 1.5px solid silver;
  border-radius: 0px;
  width: 170px;
  height: 18px;
}
progress::-webkit-progress-bar {
      background: linear-gradient(
      to right,
      white 10%,
      #ececec 11% 11.5%,
      white 11.5% 20%,
      #ececec 20% 21.5%,
      white 21.5% 30%,
      #ececec 31% 31.5%,
      white 31.5% 40%,
      #ececec 41% 41.5%,
      white 41.5% 50%,
      #ececec 51% 51.5%,
      white 51.5% 60%,
      #ececec 60% 51.5%,
      white 61.5% 70%,
      #ececec 70% 71.5%,
       white 71.5% 80%,
      #ececec 80% 81.5%,
       white 81.5% 90%,
      #ececec 90% 91.5%,
       white 10%
    );
  border-radius: 0px;
}
progress::-webkit-progress-value {
  background-color: cornflowerblue;
  border-radius: 0px;
}

<section class="prog">   
  <p>Progress of today's class 
   <progress value="2" max="5"></progress>
  </p>
</section>

• • 更新日期：**

正如@Afif提到的repeating-linear-gradient()，这种方法是一种更简洁的方式来做上面提到的事情，几乎所有的浏览器都支持这种方法。
一个二个一个一个

::-webkit-progress-bar为**non-standard**，不建议用于生产网站。
忽略这一点，@Ahmed Ali建议的方法是正确的，或者你也可以使用一个重复的背景图像来显示你预期的结果。
为了说明，我从互联网上随机选取了一条垂直线，所以在您的情况下，您需要创建一条您想要的颜色的线。

progress {
  border: 1.5px solid silver;
  border-radius: 0px;
  width: 170px;
  height: 18px;
}

progress::-webkit-progress-bar {
  background-color: whitesmoke;
  background-image: url('https://www.researchgate.net/profile/Kyriaki-Mikellidou/publication/264201750/figure/fig2/AS:288776888434689@1445861183969/The-vertical-horizontal-illusion-Although-of-equal-lengths-the-vertical-line-looks.png');
  background-size: 20px;
  background-repeat: repeat;
  border-radius: 0px;
}

progress::-webkit-progress-value {
  background-color: cornflowerblue;
  border-radius: 0px;
}

<section class="prog">
  <p>Progress of today's class <progress value="2" max="5"></progress></p>
</section>