2

Что я хочу создать:

  1. Пунктирную границу над каждым li-элементом

  2. Размер точки и расстояние между ними можно изменять настройками в CSS или в изображении SVG

  3. Ширина ul должна быть масштабируемой, так же, как и ширина границы

  4. Точки не должны быть обрезаны при изменении размера области просмотра 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?

1

1 ответ 1

2

border-image выглядит как ссылка, на изображение, где оно расположено. Вы можете контролировать размер, и указать, что повторы должны быть округлены - round до нужной ширины.

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>

Я здесь использовал ромбики в формате PNG с сайта MDN , но вы можете достаточно легко создать PNG-файл (или SVG) с желаемой формой точки.

На вопрос ответил - Paul LeBeau

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.