如何使 CSS 三角形（带边框）跨浏览器兼容答案

【问题标题】：How to make CSS triangles (with borders) compatible across browsers如何使 CSS 三角形（带边框）跨浏览器兼容
【发布时间】：2012-05-23 20:21:32
【问题描述】：

我能够创建一个简洁的流程图，如下所示：http://jsfiddle.net/R8Gx3/3/

但是，主要浏览器（Chrome、Firefox、IE）的呈现并不一致。

对于如何以更可靠的方式实现同样的效果有什么想法吗？

显然我可以使用图像，但我更喜欢 CSS，因为在 CSS 中编辑颜色更容易（而不是创建新图像）。

我不能只使用三角形字符，因为元素后面有纹理背景，所以我需要透明度。

【问题讨论】：

【解决方案1】：

我认为放置 UTF-8 三角形（一端两个，另一端）会更好，而不是依赖于边界黑客。

【讨论】：

【解决方案2】：

对于现代浏览器，您可以使用 CSS 转换（对于 9 及以上版本的 IE）

所以你制作一个带有上/右边框的框并将其旋转 45 度。

通过这种方式，您可以简化 html，只需使用带有 :after 和 :before 的箭头（每个都是提示之一）

【讨论】：