蒙版/裁剪按钮的右上角[重复]

Question

我想屏蔽按钮的右上角，以便在按钮的屏蔽/裁剪部分放置一个徽章，像这样。

正确的图像就是我所拥有的

我试图在这个答案中做类似的事情： How to cut a circular part from an image?

但似乎蒙版仅适用于图像，而不适用于按钮

这是来自我的应用程序的 sn-p 代码

          <b-button pill
                    class="notification"
                    :class="{ actived: isActive}"
                    @click="showNotif">
            <b-icon-bell></b-icon-bell>
            <span class="badge">3</span>
          </b-button>

 // in my Scss file
 .notification {
      width: 40px;
      height: 40px;
      background-color: $white;
      margin-right: 3%;
      border-color: transparent;
      & .b-icon {
        margin: 0 0 0 -4px;
        width: 24px;
        height: 24px;
        font-family: FuturaStd;
        font-size: 20px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: center;
        color: $bluey-grey;
      }

      .badge {
        position: absolute;
        top: 5px;
        padding: 3px 6px;
        border-radius: 50%;
        background: $golden-yellow;
        color: white;
      }
    }

Answer 1

一种解决方案可能是将黄色圆圈包裹在另一个 div 中，为其提供几个像素的空间。因此，在具有 2px 或 3px 或 4px 填充的徽章周围添加一个包装器。

<div class="badge-wrapper">
  <span class="badge">3</span>
</div>

.badge-wrapper {
  background-color: grey; // same as the background
  padding: 3px;
  border-radius: 50px;
}

然后将定位css从徽章移动到包装器。

Answer 2

感谢您的回答，但我找到了像您这样的解决方案 我在我的徽章跨度之前添加了一个

<span class="badge-hide"></span>

我应用了这个 css

      .badge-hide {
        position: absolute;
        top: 10px;
        margin-left: 2px;
        padding: 9px 9px;
        border-radius: 50%;
        background: #f2f5f8;
        color: white;
      }

      .badge {
        position: absolute;
        top: 8px;
        margin-left: 3px;
        border-radius: 50%;
        background: #eec710;
        color: white;
      }

结果：