使用 CSS 创建形状分隔符

CSSCSSBeginner
立即练习

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

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用 CSS 创建一个形状分隔符。该分隔符将使用 SVG 形状在视觉上分隔两个不同的块。通过使用 ::after 伪元素并设置父元素的背景颜色,我们可以轻松自定义分隔符以匹配网页的整体设计。本实验将提供使用 CSS 创建视觉上吸引人且功能齐全的分隔符的实践经验。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate 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.htmlstyle.css

要使用 SVG 形状在两个不同的块之间创建一个分隔元素,请按照以下步骤操作:

  1. 使用 ::after 伪元素。
  2. 通过 background-image 属性,使用数据 URI 添加 SVG 形状(一个 24x12 的三角形)。默认情况下,背景图像会重复并覆盖伪元素的整个区域。
  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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程