需求

比如新浪微博的tip，或者别的网站常用的tip，都可以看到三角形的身影，一般来说，都会使用图片，但是我希望能用css解决。

三角形的实现方式（不考虑css3）：

1. 纯字符

2.border

可选字符如下：◣◢◤◥▲▼► ◄△▽⊿

你可以等比放大缩小，或者改变颜色

如果字符无法满足需求，使用border

.arrow {    display: block;    width: 0;    height: 0;    font-size: 0;    /** 下面两行随你配置 **/    border-width: 40px;    border-style: solid;    border-color: transparent;    _filter: chroma(color=#000000);}/** * 向上的三角形 */.up {    border-top-color: red;}

 

最后要说的是，IE6对于边框透明的支持很差，所以如果是内部的元素设置了透明，会直接覆盖外层的颜色，导致出现一些问题，如果项目本就不打算支持IE6，那么可以放心使用