本文主要包含CSS,quiz,三角形等相关知识,佚名 希望在学习及工作中可以帮助到您
推的原文是：“CSS Quiz: 如何不用图片、兼容所有浏览器实现这样的界面？晚上博客公布答案 twitpic.com/981xba”。大概需要实现下图的效果：
一、第一种方法
如 @zhiyelee 同学的方案所示，原理可以分解为：
利用 border 来实现2个三角形
将三角形叠在一起，实现一个类似的效果。
这是一种不错的方案。我现在小三角形的时候，也喜欢用这种方法。
二、终极方案
CSS3 是经常被提起，但在桌面端又很少被用到的内容。像 Alice UI 中有很多兼容解决方案其他都是利用 CSS3 来作高级浏览器的实现的。今天这个方案应该也算是一种兼容解决方案吧。后续再整到 Alice 中去。实现原理是这样的：
创建一个有 border 的四方形，用 CSS3 transfrom 作 45 度旋转
利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案
具体的效果可以看：Pure CSS Tips Angle。主要的实现代码可以自己 view source，这里贴出 CSS 代码：