javascript - 任何人都有使用 css 和 html 创建它的简单方法？

Question

我已经使用以下代码完成了此操作，但我认为这是一种很难做到的方法，任何人都可以通过 css 和 html 轻松创建此操作。

.fline {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 30%;
  margin-top: -9px;
}

.fline1 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 60%;
  margin-top: -10px;
}

.fline2 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 88.2%;
  margin-top: -11px;
}

<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>

Answer 1

.scale-container {
  width: 300px;
}

.scale {
  width: 296px;
  height: 20px;
  border: 2px solid black;
  border-bottom: none;
}

.scale>div {
  width: 50%;
  height: 20px;
  border-right: 2px solid black;
}

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

<div class="scale-container">
  <div class="scale">
    <div></div>
  </div>
  <div class="label-container">
    <div>Low</div>
    <div>Average</div>
    <div>High</div>
  </div>
</div>