创建一个顶部带有三角形的内容容器

简介

在本实验中，我们将学习如何使用 CSS 创建一个顶部带有三角形的内容容器。这是许多网站和应用程序中常用的设计元素，用于增加视觉吸引力并营造层次感。完成本实验后，你将具备创建此效果并将其应用于自己项目的技能。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

带顶部三角形的边框

虚拟机中已提供了 index.html 和 style.css。

要创建一个顶部带有三角形的内容容器，请执行以下步骤：

使用 ::before 和 ::after 伪元素创建两个三角形。
将三角形的 border-color 和 background-color 设置为与容器匹配。
将 ::before 三角形的 border-width 设置得比 ::after 三角形宽 1px，以作为边框。
将 ::after 三角形定位在 ::before 三角形右侧 1px 处，以便显示左边框。

以下是容器的示例 HTML 代码：

<div class="container">Border with top triangle</div>

以下是相应的 CSS 代码：

.container {
  position: relative;
  background: #ffffff;
  padding: 15px;
  border: 1px solid #dddddd;
  margin-top: 20px;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 19px;
  border: 11px solid transparent;
}

.container::before {
  border-bottom-color: #dddddd;
}

.container::after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已完成“带顶部三角形的边框”实验。你可以在 LabEx 中练习更多实验来提升你的技能。