带顶部三角形的边框

CSSCSSBeginner
立即练习

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

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

简介

在本实验中,我们将学习如何使用 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/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35170{{"`带顶部三角形的边框`"}} css/colors -.-> lab-35170{{"`带顶部三角形的边框`"}} css/margin_and_padding -.-> lab-35170{{"`带顶部三角形的边框`"}} css/borders -.-> lab-35170{{"`带顶部三角形的边框`"}} css/positioning -.-> lab-35170{{"`带顶部三角形的边框`"}} css/backgrounds -.-> lab-35170{{"`带顶部三角形的边框`"}} css/pseudo_elements -.-> lab-35170{{"`带顶部三角形的边框`"}} end

带顶部三角形的边框

虚拟机中已提供了 index.htmlstyle.css

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

  1. 使用 ::before::after 伪元素创建两个三角形。
  2. 将三角形的 border-colorbackground-color 设置为与容器匹配。
  3. ::before 三角形的 border-width 设置得比 ::after 三角形宽 1px,以作为边框。
  4. ::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 中练习更多实验来提升你的技能。

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