Что я хочу создать:
Пунктирную границу над каждым
li
-элементомРазмер точки и расстояние между ними можно изменять настройками в CSS или в изображении SVG
Ширина
ul
должна быть масштабируемой, так же, как и ширина границыТочки не должны быть обрезаны при изменении размера области просмотра
viewport
. Это означает, что должны быть видны только полные (целые) круги
Я не хочу, чтобы это произошло,- (см. крайнюю точку), при изменении размера области просмотра viewport
Я не могу придумать способ, чтобы создать это, используя:
repeated background image
(повторяющиеся фоновые изображения)
огромные (очень широкие) фоновые изображения
border-image
Что я получил:
Я нашел способ, но это действительно раздражает. Это работает, но я вынужден создавать сотни (ненужных) span
- элементов, так как я не знаю максимальную ширину элемента.
Идея очень проста: точки, которые не вписываются, скрываются - overflow: hidden;
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;
}
<ul>
<li>
<div>
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
<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>
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
Item 2
</li>
</ul>
Есть ли другие хорошие способы решить эту проблему с помощью SVG, градиентов?
Источник: How to create a repeated border for a responsive element?