Beveled corner on a rounded button

Question

I need to create a rounded button with an information badge like this one :

How can I make the beveled corner on the green button around the red information badge ?

I cannot use a normal white border around the red badge (like in the below snippet), because it must be transparent and displays the page background color.

.shape {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: rgb(0, 199, 158);
  margin: 25px;
}
.shape:after {
  position: absolute;
  content: '';
  top: -10px;
  right: -10px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 3px solid white;
  background: rgb(255, 67, 0);
}
body {
  background: chocolate;
}

Beveled corner on a rounded button

1 Answers