Добавить горизонтальные линии между встроенными элементами списка - PullRequest
Новая
       13

Добавить горизонтальные линии между встроенными элементами списка

0 голосов
/ 28 августа 2018

Я пытаюсь создать индикатор выполнения шага со следующим HTML: 

.fa-check-circle {
  color: #5EB4FF;
}

.fa-circle {
  color: #CFD7E6;
  font-size: 14px;
}

.container {
  width: 100%;
  position: absolute;
  z-index: 1;
  margin-top: 20px;
}

.progressbar {
  list-style-type: none;
  display: flex;
  align-items: center;
}

.divider {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

.progressbar li {
  float: left;
  width: 15%;
  position: relative;
  text-align: center;
}

.fr-inactive-radio {
  background: #CFD7E6;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="progressbar m-0">
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><input type="radio" checked="checked" class="progress-dot"></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
</ul>

Это привело к следующему: All most there

Я хотел бы добавить горизонтальные линии между пулями, как показано ниже: enter image description here

Как лучше всего добавить горизонтальные линии между точками, которые я создал, используя только CSS (если это возможно)?

1 Ответ

0 голосов
/ 28 августа 2018

Вы можете использовать градиент следующим образом: 

.fa-check-circle {
  color: #5EB4FF;
}

.fa-circle {
  color: #CFD7E6;
  font-size: 14px;
}

.progressbar {
  list-style-type: none;
  display: flex;
  align-items: center;
  padding:0;
    background: 
    linear-gradient(to right,transparent 0,transparent calc(15% * 4),#fff calc(15% * 4)) calc(15% * 5) no-repeat,
    repeating-linear-gradient(to right,transparent 0,transparent 20px,blue 20px, blue calc(15% - 5px),transparent calc(15% - 5px),transparent 15%) 0 50%/100% 5px no-repeat;
}

.divider {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

.progressbar li {
  width: 15%;
}
.progressbar li span {
  width:20px;
  display:inline-block;
}

.fr-inactive-radio {
  background: #CFD7E6;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="progressbar m-0">
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><input type="radio" checked="checked" class="progress-dot"></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
</ul>
...