在过去我做过的演讲中，我发现自己不得不使用 文字和夸张的手势 来解释 CSS 三角形的工作原理。 效果从来都不太好。
所以我认为不妨尝试用一个实际的屏幕内代码动画来演示一下。 开始吧！
查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 解释 CSS 三角形的动画 。
技巧的核心在于元素上的边框以一定角度相交。 因此，如果一个边框是透明的，而另一个不是，则整个形状看起来像一个三角形。 您可以“打开和关闭”不同的边框，并使用不同的高度/宽度来获得指向不同方向的不同三角形形状。
当然，您可以使用 CSS 和单个元素获得 各种疯狂的形状。 三角形总是特别引人注目，因为它非常实用。
不久前，我发现自己正在为同事在一张废纸上画着非常类似的东西。 如此简单的概念，却难以用语言解释清楚。 这个动画本来会派上用场的。
不错的文章，你应该尽可能多地制作这种动画，因为它使内容更加清晰！ :) 谢谢！
:) ，不错，我喜欢！
绝妙的想法，制作得也很棒。 非常简单易懂的分步动画。 谢谢，我想我会在我的大学教学中展示它。
非常巧妙。 不错的演示！
不错，我希望在我第一次尝试弄清楚这个问题时就有这个动画。 你让它变得如此易于理解。 现在我为之前花了那么长时间才解决这个问题而感到有点傻。
嘿，简单有效的解释。 谢谢！
非常感谢 Chris。 我今天正在研究这些内容，我的大脑很难处理它是怎么工作的。 就在我思考这个问题后，你的文章出现在我的订阅源中。 我感觉你在监视我……
很棒的解释……我教授 HTML 和 CSS，解释 CSS 三角形是一个挑战……我以后会尝试使用这个动画来添加视觉解释……
这是我关于“CSS 箭头/三角形组合”的 CodePen，其中您可以看到一些最常用的三角形/箭头方向。
很棒的动画。
太棒了。 我还没有用到过，但这是一种很好的解释方法。
嘿，谢谢 Chris，
这是创建 CSS 三角形的标准方法。
更棘手的是创建 CSS 星星！
大家觉得呢？
取两个盒子，将它们叠放在一起，然后将其中一个盒子旋转 45 度。 这样应该可以创建一个简单的星星。
查看 CodePen 上 begetolo (@begetolo) 编写的 简单的 CSS 星星 。
或者查看 CSS-Tricks :)
太棒了 Bert！ 使用元素上的伪类解决了问题。 谢谢。 :-)
不要误会我的意思，使用纯 CSS 创建形状是一种“创意”艺术，但我不明白为什么这么多人在生产站点中坚持使用这种技术，而 SVG 支持现在如此普遍。
使用 SVG（内联或非内联）意味着额外的请求，无论是对于 <= IE8（始终如此），还是所有浏览器。 SVG 回退技术会添加相当数量的额外标记和注意事项。
CSS 三角形不需要额外的请求，并且在用于伪元素时在 IE8 和现代浏览器中都能很好地工作——因此不需要额外的标记。
CSS 箭头也可以使用相对单位动态调整大小（将笔划宽度设置为 em，并让父级字体大小确定箭头的尺寸）。
我非常喜欢在我的网站构建中尽可能多地使用 SVG——但仅在适用时使用。 当箭头可以无需请求或额外标记生成时，使用 SVG 生成箭头通常不是最佳选择。
使用 CSS 的一个很好的理由是可以动画化“图形”的各个部分。
Stu，我支持 CSS 和 SVG，但仅用 CSS 就能实现效果非常棒且更可取。
我完全同意 Larry 的观点。
我同意回退很麻烦。
尽管在工具提示的情况下，如果您使用内联 SVG（HTML 中的
<svg>标签），您不会导致额外的请求，并且可以将您的内容放在 SVG 中的<foreignObject>中。 这自然会回退到一个没有箭头的框……这并不是世界末日，仍然可以使用。您可以动画化 SVG。
使用 CSS 执行此操作是一种技巧。 CSS 不是为绘制形状而设计的……SVG 是。 我们习惯于利用 CSS 来弥补过去浏览器故障，以至于我认为我们经常没有意识到自己何时在这样做。
CSS 中的注释通常非常糟糕，以至于不清楚正在使用一组复杂的边框、宽度、高度和
:before/:after元素来创建形状。 如果您对这些内容进行了彻底的注释，那么您就是个好人，我喜欢你 :-)介意用您所说的话创建一个 CodePen，以便我们都能学习吗？
这是一个使用 <foreignObject> 的 SVG 技术演示：http://codepen.io/stucox/pen/JzBfe
这太棒了！ 我确实知道如何背诵三角形的代码，但现在我实际上理解了它们为什么是那样的 :)
现在我将来可以更具创意地使用它们（Y）
有人知道如何旋转（比如 10 度）使用这种方法创建的三角形吗？
transform: rotate(10deg);?您尝试过吗？ 我无法使其工作……
嘿 Chris，出于好奇，现在我们有了更多背景……:) 当时你在图片中解释的是什么？哈哈
抱歉，发错帖子了……哦，天哪。
是的，对我来说效果很好（使用 Compass 添加供应商前缀）
http://codepen.io/jetpacmonkey/pen/lbKJH
动画很棒，谢谢。
精彩的解释！ 谢谢您使它变得清晰！
是的，这是一篇很棒的文章。 你绝对应该多做一些动画。
这彻底帮我理清了 CSS 三角形的知识。非常感谢！
Firefox 似乎在实线边框的交汇处会产生模糊效果（我第一次遇到这种情况）。我也找到了关于此问题的现有错误报告。我想目前的解决方案是使用点状边框代替实线边框 http://codepen.io/Boogiesox/pen/usmFG。唯一的例外是 IE 10 中的情况相反，但在 Win 上的 Opera 和 Chrome 中，你获得了极高的评价。
你使用的是哪个版本的 Windows 和 Firefox？
我使用的是 Win7 Pro，Firefox 24.0，两个三角形在我这里看起来都很好，请看 这张截图
很高兴你提到了这一点，@Ricardo Zea。我正在运行相同的规格，但是，我重新启动并禁用了扩展程序。看起来我的一个附加组件与这种情况不太兼容。我没有太多附加组件，所以我可能会尝试追踪一下哪个附加组件导致了问题。看看我在禁用扩展程序之前看到的画面 @ http://d.pr/i/QuS5
无论如何，这是一个非常棒的动画，它很好地说明了一个技巧，老实说，我之前从未见过/使用过。制作过程一定很有趣。
在 IE10 中，使用完整的 IE10 浏览器和文档模式，顶部的三角形看起来像一个矩形，底部的三角形看起来正常。
查看一下：http://d.pr/i/9yWy
事实证明，它位于“选项”>“高级”>“浏览”>“在可用时使用硬件加速”下。这似乎已经在 bugzilla 上讨论过了。这似乎是解决 FF 中任何“模糊”或失真问题的修复方法。
昨天我正在制作一个这样的工具提示，但我发现我遇到了区域问题，因为透明边框会延伸到箭头之外。
通过使用正方形并将其旋转 45 度来解决此问题 - 这样一来，点击区域就只有可见的部分了。
Pen.
我已经使用这个技巧几年了，但一直不明白它为什么有效。感谢你的阐明。（以及动画！）
我喜欢你将独特的语言结合起来，摆脱了无聊的刻板印象的方式。
嘿 Chris，出于好奇，现在我们有了更多背景……:) 当时你在图片中解释的是什么？哈哈
解释这个非常巧妙的技巧的好方法 :)
我尤其喜欢你在最后淡出到一个使用示例的方式。
对所有用户来说都是一个非常有教育意义的资源。
与 CSS 形状 结合使用非常有用。
伙计……CSS 三角形形状的寓言是我见过的最酷、最简单的例子，最重要的是，它巧妙地使用了 CodePen。
真的，很棒的教学方式……
精彩的演示！！！非常感谢！！！
如此简单，如此出色 - 谢谢
类似的技巧可以用于创建圆形。干杯。