使用div+css实现简单的箭头

CSS:

    .box{background-color: Teal;width: 160px;height: 400px;margin: 50px auto;text-align: center;}
    .box p{background:green;}
    .box div{margin:0 auto;}
    /*箭头向上*/
    .to_top{width: 0;height: 0;border-bottom: 10px solid #fff;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
     }
     /*箭头向下*/
     .to_bottom{width: 0;height: 0;border-top: 10px solid #fff;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
     }
     /*箭头向左*/
     .to_left{width: 0;height: 0;border-right: 10px solid #fff;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
     }
     /*箭头向右*/
     .to_right{ width: 0;height: 0;border-left: 10px solid #fff;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
     }

HTML:

    <div class="box">
        <p>向上箭头</p>
        <div class="to_top"></div>
        <p>向左箭头</p>
        <div class="to_left"></div>
        <p>向右箭头</p>
        <div class="to_right"></div>
        <p>向下箭头</p>
        <div class="to_bottom"></div>
    </div>

效果图：