使用 css 和/或 SASS 的 DIV 中的动态垂直条纹答案

【问题标题】：Dynamic vertical stripes in DIV using css and/or SASS使用 css 和/或 SASS 的 DIV 中的动态垂直条纹
【发布时间】：2018-10-10 12:13:45
【问题描述】：

我试图弄清楚如何在 DIV 的背景上创建最多 4 个垂直条纹。每个条带为 4 个像素宽，并且与 div 的 h=height 相同。我还需要让条纹是动态的。根据对象中的某些数据，在运行时可以看到任意数量的 4 个条纹。

这是一个总体思路的图像。

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

谢谢

【问题讨论】：

请包括您的尝试。

标签： javascript css sass

【解决方案1】：

如果我正确理解您的问题，box-shadow 可能会帮助您解决此问题。这是我尝试过的，

初始化具有一定高度和宽度的 div
现在我们有伪元素 :before 和 :after 使用它来创建条带，即会出现 2 个条带。
现在，box-shadow 出现在您可以使用n 条数box-shadow 的每个条带中。

这是我的尝试。

.progress{
  width:140px;
  height:40px;
  background-color:white;
  border:2px solid black;
}
.progress::after{
  content:'';
  position:absolute;
  width:4px;
  height:inherit;
  background-color:red;
  box-shadow:4px 0 lightgreen
}
.progress::before{
  content:'';
  position:absolute;
  width:4px;
  height:inherit;
  background-color:blue;
  left:18px;
  box-shadow:4px 0 pink
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="progress"></div>
</body>
</html>

希望对你有帮助。

【讨论】：

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