Маскиране/изрязване на горния десен ъгъл на бутона

Бих искал да маскирам горния десен ъгъл на бутона, за да поставя значка в маскираната/изрязаната част на бутона по този начин.

въведете описание на изображението тук въведете описание на изображението тук

Правилното изображение е това, което имам

Опитах се да направя нещо като този отговор: Как да изрежа кръгла част от изображение?

Но изглежда, че маската се прилага само към изображения, а не към бутони

това е кодов фрагмент от моето приложение


          <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;
      }
    }

html vue.js css sass
person Sayf-Eddine    schedule 19.05.2020    source източник

Отговори (2)


arrow_upward
0
arrow_downward

Едно решение може да бъде да обвиете жълтия кръг в друг 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 от значката към обвивката.

person Programmingjoe    schedule 19.05.2020

arrow_upward
0
arrow_downward

Благодаря за отговора, но намерих решение като вашето, което добавих точно преди значката ми да премине a

<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;
      }

Резултат: въведете описание на изображението тук

person Sayf-Eddine    schedule 19.05.2020
comment
Мисля, че може би единственият недостатък на това е, че сега трябва да коригирате и двата класа, ако промените позиционирането на който и да е от тях. Все пак се радвам, че си го разбрал :) - person Programmingjoe; 20.05.2020