CSS quiz 带边 border 的三角形

一、第一种方法
如 @zhiyelee 同学的方案所示，原理可以分解为：

利用 border 来实现2个三角形
将三角形叠在一起，实现一个类似的效果。
这是一种不错的方案。我现在小三角形的时候，也喜欢用这种方法。

二、终极方案
CSS3 是经常被提起，但在桌面端又很少被用到的内容。像 Alice UI 中有很多兼容解决方案其他都是利用 CSS3 来作高级浏览器的实现的。今天这个方案应该也算是一种兼容解决方案吧。后续再整到 Alice 中去。实现原理是这样的：

创建一个有 border 的四方形，用 CSS3 transfrom 作 45 度旋转
利用 IE 的 matrix filter 实现 css3 transfrom 的兼容方案
具体的效果可以看：Pure CSS Tips Angle。主要的实现代码可以自己 view source，这里贴出 CSS 代码：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表