<div class="arrow-up">

     <!--向上的三角-->

</div>

<div class="arrow-down">

    <!--向下的三角-->

</div>

<div class="arrow-left">

    <!--向左的三角-->

</div>

<div class="arrow-right">

    <!--向右的三角-->

</div>

/*箭头向上*/

.arrow-up {

    width:;

    height:;

    border-left:30px solid transparent;

    border-right:30px solid transparent;

    border-bottom:30px solid #fff;

}

 /*箭头向下*/

.arrow-down {

    width:;

    height:;

    border-left:20px solid transparent;

    border-right:20px solid transparent;

    border-top:20px solid #0066cc;

}

 /*箭头向左*/

.arrow-left {

    width:;

    height:;

    border-top:30px solid transparent;

    border-bottom:30px solid transparent;

    border-right:30px solid yellow;

}

/*箭头向右*/

.arrow-right {

    width:;

    height:;

    border-top:50px solid transparent;

    border-bottom: 50px solid transparent;

    border-left: 50px solid green;

}