RUDE

Создание бело-серой сетки для фона средствами css

CoderStudio, 17.05.2022 22:08
Создание бело-серой сетки для фона средствами css
бело-серая сетка

Мы будем использовать линейный css градиент для создания фона с бело-серой сеткой в шашечку, которая часто используется как подложка для отображения иконок. На ее фоне очень четко видно очертания предмета, логотипа или иконки.

Шаг первый: нарисуем два треугольника справа вверху и слева внизу

Создадим html-файл:

и css-файл:

получившийся результат:

Шаг второй: перемещение треугольника сверху справа налево вниз, затем создание прямоугольника

добавьте css

background-position: 0px 0px, 20px 20px;

Наконец: измените ширину и высоту div

Благодаря фону-позиции мы можем показать всю ширину div

width: 300px;
height: 300px;

Онлайн демонстрация рабочего примера

https://codepen.io/coderstudio/pen/BaYWmQq