CSS画三角形

需求

比如新浪微博的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;
}

 

demo

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

 

更多神奇的例子