Как с помощью стилей сделать заливку квадратами?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Приветствую.
Подскажите, пожалуйста, как сделать так, чтобы блок длиной 100% и высотой 1px залить с помощью только лишь стилей так, чтобы был шаблон: пиксель цветной, два пустых пикселя, пиксель цветной, два пустых пикселя, пиксель цветной, два пустых пикселя, пиксель цветной, два пустых пикселя...?
точка пусто пусто точка пусто пусто точка пусто пусто
Интересует именно с помощью только лишь стилей без фоновых изображений и свг.

Дополнительно:

Решение предложено в ответах, но на самом деле рекомендация для таких вещей - таки сделать картинку, причём не 1х3px, а 1х300+px и использовать её в виде data-uri. Почему? Потому что это будет куда легче в плане вычислительной нагрузки. Например:

data:image/gif;base64,R0lGODlh8AABAIAAAAAAAP///yH5BAEAAAEALAAAAADwAAEAAAIYRGJ4yesKW3yy0juz1Xj7DnLiN4bkaT4FADs=

data:image/gif;base64,R0lGODlh8AABAIAAAAAAAP///yH5BAEAAAEALAAAAADwAAEAAAIYRGJ4yesKW3yy0juz1Xj7DnLiN4bkaT4FADs=

Ответы:

https://codepen.io/xdevelx/pen/xxmgMbN
snippet

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Дмитрий К. Ответ

Для создания заливки квадратами с помощью стилей CSS можно воспользоваться псевдоэлементами ::before и ::after, а также генерацией контента с помощью атрибута data-*. Для этого создадим контейнер, в котором будут располагаться квадраты, и применим к нему стили.

Пример реализации на языке CSS:

.container {
  position: relative;
  width: 300px;
  height: 300px;
}
 
.square {
  width: 50px;
  height: 50px;
  background-color: #ff0000;
  position: absolute;
}
 
.square:nth-child(1) {
  top: 0;
  left: 0;
}
 
.square:nth-child(2) {
  top: 0;
  left: 50px;
}
 
.square:nth-child(3) {
  top: 0;
  left: 100px;
}
 
.square:nth-child(4) {
  top: 0;
  left: 150px;
}
 
/* Добавьте необходимое количество квадратов и задайте им позицию */

.container { position: relative; width: 300px; height: 300px; } .square { width: 50px; height: 50px; background-color: #ff0000; position: absolute; } .square:nth-child(1) { top: 0; left: 0; } .square:nth-child(2) { top: 0; left: 50px; } .square:nth-child(3) { top: 0; left: 100px; } .square:nth-child(4) { top: 0; left: 150px; } /* Добавьте необходимое количество квадратов и задайте им позицию */

В данном примере создается контейнер с классом "container" и квадраты с классом "square". Каждый квадрат имеет ширину и высоту 50px и красный цвет фона. С помощью псевдоэлементов ::nth-child() задается позиция каждого квадрата в контейнере.

Вы можете дополнить данный пример добавлением других цветов, размеров и позиций квадратов, чтобы создать уникальный дизайн заливки квадратами. Важно помнить, что для каждого квадрата нужно задать уникальные свойства позиции (top, left, right, bottom), чтобы они не накладывались друг на друга.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Figma Баг с переносом слов в Figma? 1 ответ