如何使CSS三角形（有边框）跨浏览器

然而，渲染是不能跨越的主要浏览器是一致的（铬， Firefox，IE）。

有关如何以更可靠的方式达到同样效果的任何想法？

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

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

2012-05-23 Ryan

对于现代的浏览器可以使用CSS tranforms（用于IE，这将是9以上）

所以你与顶部/右边界框和旋转它45度。

这种方式可以简化HTML和刚刚与:after和:before（每一个是提示之一）更新了演示链接

2012-05-23 21:04:02

我会给你“最好的答案”，因为你做了很好的努力，尽管这仍然没有达到我想要做的。（看看它如何看起来很时髦的背景？http://jsfiddle.net/FJEFP/2/） – Ryan

@Ryan，你可以改变'div.left：before'的背景颜色，但是......它不是真正的透明.. http://jsfiddle.net/gaby/FJEFP/3/ –

无论如何，我印象非常深刻。谢谢你的帮助！ – Ryan

我想你会有更好的运气放置UTF-8三角形，两个在一端，另一个在另一端，而不是依赖于边界黑客。

2012-05-23 20:30:36

申请的箭头，并添加了备注我如何需要透明度。 – Ryan

没有什么能够阻止你在这些角色上使用不透明度。 –

回答