css伪类制作三角箭头

<meta charset="utf-8">
<style type="text/css">
   .tip{
        padding: 5px 10px;
        margin-left: 15px;
        border:1px solid #f8d19f;
        border-radius: 3px;
        background-color: #fdfbb8;
        color:#d07807;
        font-size:12px;
        position: absolute;
        display: block;
       }
    .tip:before, .tip:after{
        content: attr(data-content);
        font-family: xms;
        position: absolute;  

       }
    .tip:before{
        color: :#f8d19f;
        left: -10px;
    }
    .tip:after{
        color:#fdfbb8;
        left: -8px;
    }

</style>

<span id="tip" class="tip" data-content="◀">这是一个小tips提示</span>