Создайте зигзагообразный фон с использованием CSS

Введение

В этом практическом занятии мы узнаем, как создать зигзагообразный фон с использованием CSS. С помощью linear-gradient() и настройки background-size и background-position мы сможем создать визуально привлекательную узор, который можно использовать на различных элементах веб-сайта. Это практическое занятие поможет улучшить наши навыки в CSS и дать нам лучшее понимание того, как использовать CSS для создания уникальных дизайнов.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 94%. Он получил 100% положительных отзывов от учащихся.

Зигзагообразный фон

В ВМ уже предоставлены index.html и style.css.

Для создания зигзагообразного фона используйте следующие шаги:

Задайте белый фон с использованием background-color.
Создайте части зигзагообразного узора с использованием background-image с четырьмя значениями linear-gradient().
Укажите размер узора с использованием background-size.
Разместите части узора в правильных местах с использованием background-position.
Чтобы повторять узор, используйте background-repeat.
Примечание: height и width элемента фиксированы только для целей демонстрации.

Вот пример кода:

<div class="zig-zag"></div>

.zig-zag {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position:
    -30px 0,
    -30px 0,
    0 0,
    0 0;
  background-size: 60px 60px;
  background-repeat: repeat;
}

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по зигзагообразному фону. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.