三角箭头 css实现

效果图：

 

1、html 代码

<div>较昨日 <span class="dot-up"></span> 20%</div>

<div>较上周 <span class="dot-down"></span> 20%</div>

 

2、css 代码

<style type="text/css">
    /* 向上的箭头 */
    .dot-up {
        display: inline-block;
        font-size: 0;
        line-height: 0;
        border-width: 8px;
        border-color: #00B39E;
        transform: rotate(180deg);
        border-bottom-width: 0;
        border-style: dashed;
        border-top-style: solid;
        border-left-color: transparent;
        border-right-color: transparent;
    }
    /* 向下的箭头 */
    .dot-down {
        display: inline-block;
        font-size: 0;
        line-height: 0;
        border-width: 8px;
        border-color:  #F2423A;
        border-top-width: 0;
        border-style: dashed;
        border-bottom-style: solid;
        transform: rotate(180deg);
        border-left-color: transparent;
        border-right-color: transparent;
    }
</style>