Javascript 有人知道如何在CSS中实现这一点，从而使其具有响应性吗？

我想知道如何在CSS中实现这一点（less和jquery也很好：）

我有滑块，但它看起来像这样：

我希望它看起来像这样：

字体是诅咒没有问题，没有使东西圆等，删除边界和东西

我想知道我如何才能实现这个小插脚：在CSS中，这样它就可以保持正确的尺寸，并且在屏幕大小不同时可以挤压在一起。顺便说一下，多谢danielcrisp

---

感谢您的帮助

我认为最好的解决方案是将8个元素设置为绝对位置，并保留10*n%。 可以使用css伪元素而不是DOM元素来防止HTML膨胀

编辑：事实证明你不能链接css伪元素，你必须在代码中附加真正的DOM元素

...

想出了这个解决方案

HTML:

不过，使用一些javascript在滑块中添加div可能更容易实现

<span class="grad grad1"></span>
...
<span class="grad grad9"></span>

<div class="slider">
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
  <div class="pin">
  </div>
</div>

.slider{
  width:500px;
  height:20px;
  border-bottom:2px solid red;
}
.slider .pin{
  height:100%;
  width:10%;
  float:left;
  border-right:2px solid red;
  transform: translateY(55%);
  box-sizing: border-box; 
}
.slider .pin:last-child{
  display:none;
}