css 设置上下左右三角形箭头 

<html>
    <head> 
        <style>
            .up {
                height:0;
                width:0;
                border-top:20px solid black;
                border-left:20px solid transparent;
                transform:rotate(-45deg); 
            }
            .down {
                height:0;
                width:0;
                border-bottom:20px solid black;
                border-right:20px solid transparent;
                transform:rotate(-45deg); 
            }
            .left {
                height:0;
                width:0;
                border-bottom:20px solid black;
                border-right:20px solid transparent;
                transform:rotate(45deg); 
            }
            .right {
                height:0;
                width:0;
                border-top:20px solid black;
                border-left:20px solid transparent;
                transform:rotate(45deg); 
            }
        </style> 
    </head> 
    <body> 
        <div class="up"></div>
    </body>
</html>

备注:transform在IE8及其以下均不好使

posted @ 2015-08-04 17:07  蒲木杉  阅读(725)  评论(0)  编辑  收藏  举报