Javascript 使用css和/或SASS在DIV中动态垂直条纹

我正在试图找出如何在一个DIV的背景上创建最多4个垂直条纹。每个条纹都有4个像素宽，并且与DIV的h=高度相同。我还需要使条纹具有动态性。根据对象中的某些数据，在运行时可以看到任意数量的4条条纹

这是一幅总体思路的图像

我一直试图用css和sass以及javascript来实现这一点，但没有取得进展。任何帮助都将不胜感激

---

谢谢

如果我正确理解了您的问题，

box shadow

可能会帮助您解决此问题。这是我尝试过的

• 初始化具有一定高度和宽度的div
• 现在我们有了psuedo元素

  ：在
  之前和
  ：在
  之后使用它来创建条带，即将出现两条条条带

• 现在，

  box shadow

  出现在您可以使用

  box shadow

  的每个条带的图片中

这是我的尝试

。进度{
宽度：140px；
高度：40px；
背景色：白色；
边框：2件纯黑；
}
.进展：：之后{
内容：''；
位置：绝对位置；
宽度：4px；
身高：继承；
背景色：红色；
盒影：4px0浅绿色
}
.进展：：之前{
内容：''；
位置：绝对位置；
宽度：4px；
身高：继承；
背景颜色：蓝色；
左：18px；
盒影：4px0粉红色
}

JS-Bin

请包括您的尝试。这看起来很棒。现在我只需要根据div中的数据在Javascript中动态创建这些条带。我已经完成了一半。Thanks@Brent... 谢谢，如果真的有帮助，请将其标记为已接受！如果您需要任何帮助，请在此处发表评论是的，这非常有帮助。最困难的部分是在运行时创建这些条带化代码。有时会有一条红色条纹。有时会出现蓝色条纹，有时会出现所有条纹。我在研究SASS变量，是吗now@Brent... 你到底想做什么？你能告诉我吗？这样我就可以帮你了。谢谢你的回复。我有4个Javascript布尔变量，如下所示：BlueStripe、RedStripe、GreenStripe和PinkStripe。然后我测试每个变量，如果它为真，我将条带添加到div中。基于这些布尔变量，我可以在运行时在div中看到任意数量的条带。