[Vuejs]-Mask/Crop the top right corner of button

by

0👍

✅

Thanks for answering, but i found a solution like yours
i added just before my badge span a

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

And i applied this 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;
      }

Result: enter image description here

0👍

One solution could be to wrap the yellow circle in another div to give it that couple pixels of space. So add a wrapper around badge that has 2px or 3px or 4px of padding.

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

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

Then move the positioning css from the badge to the wrapper.

Leave a comment