css画一个推荐图标

有很多网站上都有出现这样的图标，今天用css就画一个叭

-----------------------------css部分--------------------------------
<style>
 .common-label{
    position: absolute;
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    background-color: #db4659;
    top: 5px;
    left: 10px;
    z-index: 145;
}

 .common-label .triangle {
    position: absolute;
    top: 24px;
    left: -10px;
    width: 0;
    height: 0;
    z-index: 33;
    border-left: 10px solid transparent;
    border-right: 10px solid #df0d3a;
    border-bottom: 7px solid transparent;
    line-height: 24px;
    text-align: center;
    color: #fff;
}
</style>

---------------------------html部分---------------------------------
 <div style="width: 400px;height: 400px;;margin:100px auto;background-color: pink;">
         <p class="common-label">
            <span class="triangle">值</span>
        </p>
    </div>

就ok啦，是不是很简单呢