LabEx
ВходРегистрация

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

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы изучим, как создать разделитель форм с использованием CSS. Разделитель будет использовать SVG-форму для визуального разделения двух различных блоков. С помощью псевдо-элемента ::after и установки цвета фона родительского элемента мы можем легко настроить разделитель, чтобы он соответствовал общему дизайну нашей веб-страницы. В этом практическом занятии мы получим практический опыт в создании привлекательного и функционального разделителя с использованием CSS.

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

Разделитель форм

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

Чтобы создать элемент-разделитель между двумя различными блоками с использованием SVG-формы, следуйте шагам:

  1. Используйте псевдо-элемент ::after.
  2. Добавьте SVG-форму (треугольник размером 24x12) с помощью URI-данных с использованием свойства background-image. Фоновое изображение по умолчанию будет повторяться и заполнять всю область псевдо-элемента.
  3. Задайте желаемый цвет разделителя с помощью свойства background родительского элемента.

Используйте следующий HTML-код:

<div class="shape-separator"></div>

И примените следующие CSS-правила:

.shape-separator {
  position: relative;
  height: 48px;
  background: #9c27b0;
}

.shape-separator::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}

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

Резюме

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