CSS3 三角边框的标签

直接上代码

html: 
    <div class="badge-wrap">
        <span>标签</span>
        <span class="arraw"></span>
    </div>
css:
    .badge-wrap  {
        margin: 0 auto;
        # 居中
        width: 60px;
        background-color: #f87335;
        font-size: 0;       
        # 给父元素加font-size:0 是为了去除行内块元素一些空白间隙
        text-align: center;
        color: white;
    }
    span{
        font-size: 16px;
        line-height: 45px;
        display: inline-block;
    }
    .arraw {
        width: 0;
        height: 0;
        overflow: hidden;
        border: 30px solid transparent;
        border-bottom: 15px solid white;
        # 实现三角底边的效果 
        border-top: none;
    }
复制代码

总结：
样式是需要用心雕琢的事情