Динамические вертикальные полосы в DIV с использованием CSS и / или SASS - PullRequest
Новая
       4

Динамические вертикальные полосы в DIV с использованием CSS и / или SASS

0 голосов
/ 10 октября 2018

Я пытаюсь понять, как создать до 4 вертикальных полос на фоне DIV.Каждая полоса имеет ширину 4 пикселя и имеет ту же высоту, что и div.Также мне нужно, чтобы полосы были динамичными.Может быть любое количество из 4 полос, видимых во время выполнения на основе некоторых данных в объекте.

Вот изображение общей идеи.

Sample div with stripes

Я пытался реализовать это с помощью CSS и Sass, а также JavaScript, но не добился прогресса.Любая помощь будет принята с благодарностью.

Спасибо

1 Ответ

0 голосов
/ 10 октября 2018

Если я правильно понимаю ваш вопрос, box-shadow может помочь вам решить эту проблему.Вот что я попробовал:

  • Инициализировать div с некоторой высотой и шириной
  • Теперь у нас есть элементы psuedo :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>

Надеюсь, это поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...