【CSS in Depth 2 精译_040】6.3 CSS 定位技术之：相对定位（下）—— 用纯 CSS 绘制一个三角形

当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第一章 层叠、优先级与继承（已完结）
• 第二章 相对单位（已完结）
• 第三章 文档流与盒模型（已完结）
• 第四章 Flexbox 布局（已完结）
• 第五章 网格布局（已完结）
• 【第六章 定位与堆叠上下文】 ✔️
  • 6.1 固定定位
    • 6.1.1 创建一个固定定位的模态对话框
    • 6.1.2 在模态对话框打开时防止屏幕滚动
    • 6.1.3 控制定位元素的大小
  • 6.2 绝对定位
    • 6.2.1 关闭按钮的绝对定位
    • 6.2.2 伪元素的定位问题
  • 6.3 相对定位 ✔️
    • 6.3.1 创建下拉菜单（上）
    • 6.3.2 创建 CSS 三角形（下） ✔️
  • 6.4 堆叠上下文与 z-index （精译中 ⏳）
    • 6.4.1 理解渲染过程与堆叠顺序
    • 6.4.2 用 z-index 控制堆叠顺序
    • 6.4.3 深入理解堆叠上下文

《CSS in Depth》新版封面

译者按
上一小节介绍了 CSS 的相对定位在下拉菜单效果中的具体实现，最后还根据作者的描述，补全了相关 JavaScript 逻辑，实现了用 Tab 键循环选中弹出的下拉菜单项。值得一提的是，这部分源代码在第 1 版其实是一个类名为 dropdown-label 的 div 元素（<div class="dropdown-label">Main Menu</div>），并在鼠标悬停时出现下拉菜单。考虑到鼠标 :hover 效果在触屏设备上兼容性较差，且有违最佳实践（通过 JS 切换样式类的方案更稳健），新版才统一换成了一个 button 按钮，并通过点击来实现下拉切换。这种严谨复盘的思考方式值得借鉴。顺着作者的思路，我们再来看看他是怎么实现纯 CSS 的三角形效果的？其间对于页面可访问性又有哪些细节问题需要考虑？一起来看看吧。

6.3.2 创建 CSS 三角形 Creating a CSS triangle

下拉菜单距离完美还差最后一步。虽然已经实现了基本功能，但用户可能没法一眼看出主菜单按钮（即“Main Menu”字样的切换按钮）下方还有隐藏内容。这时就需要给按钮加上一个向下的小箭头，告诉用户在它下方还有更多内容可以浏览。

我们可以通过元素边框的一个小技巧来绘制一个三角形，并以此充当一个向下指的箭头。具体来说，就是利用切换按钮的伪元素 ::after 来绘制三角形，然后设置绝对定位，将它放到按钮的右侧。

大多数情况下，我们给一个元素设置的边框都比较细，通常给个 1px 或 2px 就差不多了；但如果把边框设置为如图 6.6 所示的粗细会怎么样呢？图中对每一侧的边框都设置了具有强烈反差感的颜色，以便区分每条边的边界和起始位置：

图 6.6 带粗边框样式的示例元素

注意观察四个角上两条边的边缘相接的地方：这里形成了一个对角边（diagonal edge）。此时再观察一下，将元素的宽高缩减到 0 会是什么效果。如图 6.7 所示，所有的边框都汇聚到了一起，并最终在元素正中位置相遇了：

图 6.7 元素宽高为零时，每条边都变成了一个三角形

此时，元素边框的每一侧都呈三角形：上边框朝下指，右边框向左指，以此类推。基于这样的观察，我们就可以利用其中一条边框作为三角形，然后将其余各边设置为透明来绘制需要的箭头符号。一个元素如果左右边框都透明，只留一个可见的上边框，最终效果则会如图 6.8 所示，形成一个简单的三角形。

图 6.8 利用元素上边框实现的 CSS 三角形效果

按照上述思路给伪元素 .dropdown-toggle::after 设置样式，形成一个 CSS 三角形。然后使用绝对定位将它放置到合适的位置。根据如下样式代码更新页面：

代码清单 6.10 对下拉按钮上的三角形设置绝对定位的样式代码

.dropdown-toggle {
  padding: 0.5em 2em 0.5em 1.5em;  /* 增加按钮元素的右内边距，为箭头标记预留足够空间 */
  border: 1px solid #ccc;
  background-color: #eee;
  border-radius: 0;
}

.dropdown-toggle::after {
  content: "";
  
  /* 将元素放置在切换按钮的右边 */
  position: absolute;
  right: 1em;               
  top: 0.9em;               
  
  /* 将上边框做成一个向下指的箭头 */
  border: 0.3em solid;                            
  border-color: black transparent transparent;
}

.dropdown.is-open .dropdown-toggle::after {
  top: 0.6em;
  border-color: transparent transparent black;  /* 下拉菜单打开时，箭头向上指 */
}

上述样式中，伪元素由于没有内容（译注：content: ""），所以也不会渲染宽高；利用 border-color 属性的简写形式，将上边框的颜色设置为黑色，左右两边及下边框的均设为透明，从而构建出一个向下的箭头；元素 .dropdown-toggle 的右边用内边距预留出足够空间，以便放置三角形。最终效果如图 6.9 所示：

图 6.9 带箭头标记的下拉菜单按钮效果

打开菜单，箭头方向应该反转朝上，表示菜单可以收拢关闭。对 top 属性值做微调（范围约在 0.9em 到 0.6em 左右），让朝上指时的箭头看起来跟向下指时处于同一位置即可。

此外，箭头效果的实现也可以考虑使用图片（image）或背景图（background image），但是短短几行 CSS 代码就能免去不必要的网络请求，何乐而不为呢？当然也可以在 HTML 中嵌入一个轻量的 SVG，但项目中要是没有引入过什么图标集的话，本例介绍的这种只用 CSS 的实现方案会更省心。别看它只是个小小的箭头，像这样轻量小巧又美观的点缀效果，也能实实在在为您的应用与网站增色不少。

这项技术还可以用来构建其他复杂的形状，比如梯形、六边形以及星型。想要查看用 CSS 构建的各种形状，请参阅 CSS-Tricks 网站的专题文章：The Shapes of CSS。请注意，这些形状通常也不是必须要掌握的知识点，尤其是在 SVG 图标盛行的当下。它们只是为了给大家展示 CSS 具备的各种能力。

译注

本节原文最后给出的文章链接在 CSS-Tricks 网站已失效（即 https://css-tricks.com/examples/ShapesOfCSS/），为此官网上很早就有读者反馈该问题，但一直没有公布新的 URL。我学到这里时碰巧搜到了这篇文章，发现是今年 4 月才更新的，有机会给各位转发一下，免得今后又过期了。此外，更新文章链接时还有个意外彩蛋，也一并分享给各位。更新这篇文章的，正是 CSS-Tricks 网站的创始人 Chris Coyier。

此人来头可不小，不仅一手创办并成功运营 CSS-Tricks 长达 15 年之久（2007 年创办，2022 年被知名 IDC 服务商 DigitalOcean 收购），同时也是 CodePen 网站的联合创始人之一。感兴趣的朋友可以去他的 个人网站 凑凑热闹，学习学习这位仍活跃在 CSS 一线的知名大咖是怎么做自我营销的。里面有很多漂亮的设计可供参考，也是个不错的学习园地。Chris Coyier 有句话给我印象很深：

I’m big on the power of writing as a way to think better and improve yourself.

我极为看重写作的力量，那是一种能帮我更好地思考并提升自我的有效途径。（深以为然！）

气氛都烘托到这儿了，怎么也得来张大头贴吧：

Chris Coyier 大头贴

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！