css实现标签角标

先看看展示效果：

实现思路

可以把尾部的角标划分成这样子，可以把尾部看成是一个长方形，利用border来实现。是不是突然豁然开朗了～～

代码实现

 <div class="unbind-box">
      <img src="/asset/icon-unbind.png"
           class="unbind-img"
           alt="">
      <span>会员已解绑</span>
 </div>

 .unbind-box {
    padding-left: 7px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    height: 27px;
    font-weight: 500;
    background: #f56c6c;
    .unbind-img {
      margin-right: 7px;
      width: 15px;
    }
    &::after {
      display: block;
      content: '';
      border: 13px solid transparent;
      border-top-color: #f56c6c;
      border-bottom-color: #f56c6c;
      border-right-color: #fafafa;
      border-left-width: 12px;
      border-right-width: 8px;
    }
  }