css制作上下左右的箭头

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     .arrow {
                width:0; 
                height:0; 
                position: absolute;
                top:0;
                left:0;
                display: inline-block;
            }
            .arrow-down {

                border-left:5px solid transparent;
                border-right:5px solid transparent;
                border-top:5px solid #f63;

            }
            .arrow-up {
                border-bottom:5px solid #f63;
                border-left:5px solid transparent;
                border-right:5px solid transparent;
                top:50px;
            }
            .arrow-left {
                border-top:5px solid transparent;
                border-bottom:5px solid transparent; 
                border-right:5px solid #f63; 
                top:100px;
            }
            .arrow-right {
                border-top:5px solid transparent;
                border-bottom:5px solid transparent; 
                border-left:5px solid #288; 
                top:150px;
            }
    </style>
</head>
<body>
     <div style="position: relative">
        <span class="arrow arrow-down"></span>
        <span class="arrow arrow-up"></span>
        <span class="arrow arrow-left"></span>
        <span class="arrow arrow-right"></span>
     </div>
</body>
</html>
补充：css生成三角形：http://www.sucaihuo.com/tools/triangle