Как создать границу в горошек?

Я пытаюсь создать границу в горошек вокруг моего контента. Например:

введите здесь описание изображения

Мне удалось добиться этого, повторив изображение (из двух отдельных точек).

.dots {
    background: url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png');
    background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
    background-position: right top, left top, right top, right bottom;
}

Однако это несовершенный результат. На определенных размерах точки начнут перекрываться.

введите здесь описание изображения

Я не уверен, как избежать этой проблемы, поскольку изображение не плавно мозаично.

Есть ли какой-нибудь другой подход, который я мог бы применить для эффекта, который не страдает от этих недостатков?


html css tile
person James Wood    schedule 26.02.2018    source источник
comment
Допустимо ли масштабирование точек?   -  person Obsidian Age    schedule 26.02.2018
comment
@ObsidianAge, да.   -  person James Wood    schedule 26.02.2018

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете легко сделать это с помощью радиального градиента в качестве повторяющегося фона, а затем настроить значения в зависимости от высоты / ширины контейнера:

.dots {
  width:300px;
  height:200px;
  padding:60px 70px;
  box-sizing:border-box;
  background:
  linear-gradient(#fff,#fff) 68px 50px/calc(100% - 136px) calc(100% - 100px) no-repeat,
  radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 12px 2px/33px 50px,
  radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 33px 27px/33px 50px;
}
<div class="dots">
  The content here
</div>

person Temani Afif    schedule 26.02.2018

arrow_upward
1
arrow_downward

Проблема возникает из-за того, что ваше фоновое изображение не такое широкое, как экран, и пытается повториться.

Чтобы исправить это, самым простым решением было бы background-size: cover < / а>. Это гарантирует, что изображение заполняет весь экран, что означает, что оно никогда не будет «зацикливаться». Обратите внимание, что это растянет изображение так, что возникнет некоторое искажение в зависимости от соотношения сторон.

Если искажение вызывает беспокойство, есть два других возможных решения:

  1. Убедитесь, что размер изображения соответствует максимальному разрешению экрана, на котором вы хотите его отображать (оптимально дополнительно увеличить размер отображаемого изображения в зависимости от области просмотра)
  2. Создайте изображение так, чтобы оно полностью перекрывалось, когда оно оборачивается, а затем используйте _ 2_.

Вот пример background-size: cover:

.dots {
  border: 5px solid black; /* For Snippet */
  height: 50vh; /* For Snippet */
  width: 50vw; /* For Snippet */
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Polka_dots.svg/1200px-Polka_dots.svg.png');
  background-size: cover;
}
<div class="dots"></div>

person Obsidian Age    schedule 26.02.2018