css实现标签角标

最新推荐文章于 2024-05-20 22:08:52 发布

sᴜᴘᴇʀ菜酱

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量379

点赞数 6

文章标签： css 前端 html css3

本文链接：https://blog.csdn.net/SuperJane_123/article/details/136238732

版权

先看看展示效果：

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

代码实现

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

// css
.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;
    }
  }