三角箭头 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>