如何为响应元素创建重复边框？

Question

我想要创建的内容:

• 每个li元素顶部的虚线边框
• 通过调整CSS或使用的图像/ SVG,可以改变它们之间的点和边距的大小
• 的宽度ul是有求必应,所以边框的宽度变化,也
• 调整视口大小时不应剪切/截断点,这意味着只有完整的cirlces应该是可见的

tl; dr:在调整视口大小时,我不希望发生这种情况(请参阅最后一个点？):

我想不出一种方法来创建这个:

• 重复的背景图像
• 一个巨大的(非常长的)背景图像
• 边框,图像

我得到了什么:

我找到了解决问题的方法,但这真的很烦人.它有效,但我不得不生成数百个(不必要的)span元素,因为我不知道元素的最大宽度.

这个想法非常简单:不适合的点,浮入隐藏的溢出.

资源

HTML

<ul>
  <li>
    <div>
      <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    Item 1
  </li>
  <li>
    <div>
      <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    Item 2
  </li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 60px;
}

ul > li div {
  overflow: hidden;
  height: 2px;
}

ul > li div span {
  float: left;
  width: 2px;
  height: 2px;
  margin: 0 4px 0 0;
  background: grey;
}

的jsfiddle

你可以在这里试试

是否有一种优雅的方法来解决这个问题,比如使用一些不错的SVG或渐变技巧？

Answer 1

border-image好像是去找我的方式.您可以控制大小,并指定将重复四舍五入到所需的宽度.

li {
  font-size: 40px;
}

.small {
  border: solid transparent;
  border-width: 15px 0 0;
  border-image:url("https://mdn.mozillademos.org/files/4127/border.png") 27 27 round;
}

.large {
  border: solid transparent;
  border-width: 30px 0 0;
  border-image:url("https://mdn.mozillademos.org/files/4127/border.png") 27 27 round;
}

<ul>
  <li class="small">First list item</li>
  <li class="large">Second list item</li>
</ul>

我在这里使用了来自MDN网站的菱形PNG,但是您应该能够轻松地创建具有所需点形状的PNG(或SVG).