Как сделать шкалу(scale) с двумя разделителями?

Question

Сделал такой вариант, но неровно. Подскажите идею плз.

    body{
      background: gray;
    }
    .wrapper {
      width: 100%;
    }

    .scale {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .scale-group {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .scale-line {
      padding: 4px;
      width: 4px;
      height: 12px;
      stroke-width: 4px;
      background: #ffffff;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      transform: translateX(-50%);
    }

    .scale-subline {
      width: 1px;
      height: 6px;
      margin-top: 14px;
      stroke-width: 4px;
      background: #ffffff;
    }

<div class="wrapper">
  <div class="scale">
    <div class="scale-group">
      <div class="scale-line"></div>
      <div class="scale-subline"></div>
      <div class="scale-subline"></div>
      <div class="scale-subline"></div>
      <div class="scale-stub"></div>
    </div>
    <div class="scale-group">
      <div class="scale-line"></div>
      <div class="scale-subline"></div>
      <div class="scale-subline"></div>
      <div class="scale-subline"></div>
      <div class="scale-stub"></div>
    </div>
    <div class="scale-group">
      <div class="scale-line"></div>
      <div class="scale-subline"></div>
      <div class="scale-subline"></div>
      <div class="scale-subline"></div>
      <div class="scale-stub"></div>
    </div>
    <div class="scale-line"></div>
  </div>

Answer 1

Не нашел у вас никаких "разделителей".

Если речь о делениях, то можно, например, так:

.scale {
  background-color: wheat;
  background-image: repeating-linear-gradient(90deg, gray 0, gray 4px, transparent 4px, transparent 160px);
  height: 20px;
}

.minorScale {
  background-image: repeating-linear-gradient(90deg, gray 0, gray 2px, transparent 2px, transparent 40px);
  height: 10px;
  margin-top: 10px;
}

<div class="scale">
  <div class="minorScale"></div>
</div>

БЛОГ НА HUSL

Как сделать шкалу(scale) с двумя разделителями?

Ответы (1 шт):