纯css实现小箭头或三角形标志

.arrow{
    width: 20px;
    height: 20px;
    margin-top: 50px;
    margin-left: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);/*旋转角度*/
}
<div class="arrow"></div>

.triangle{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform:rotate(45deg);
}
<div class="triangle"></div>

display:inline-block在ie6 7下不兼容的解决办法？
dispaly:inline;//css hack ie浏览器可以识别
zoom:1;//触发css hack的layout