Создайте привлекательные разделители форм | Дизайн CSS

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35238{{"Создание разделителей форм с использованием CSS"}} css/colors -.-> lab-35238{{"Создание разделителей форм с использованием CSS"}} css/width_and_height -.-> lab-35238{{"Создание разделителей форм с использованием CSS"}} css/positioning -.-> lab-35238{{"Создание разделителей форм с использованием CSS"}} css/backgrounds -.-> lab-35238{{"Создание разделителей форм с использованием CSS"}} css/pseudo_elements -.-> lab-35238{{"Создание разделителей форм с использованием CSS"}} end

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

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

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

Используйте псевдо-элемент ::after.
Добавьте SVG-форму (треугольник размером 24x12) с помощью URI-данных с использованием свойства background-image. Фоновое изображение по умолчанию будет повторяться и заполнять всю область псевдо-элемента.
Задайте желаемый цвет разделителя с помощью свойства 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, чтобы улучшить свои навыки.