Chamfered corner on rounded button

Question

I need to create a rounded button with an info icon like this:

How can I make a beveled corner on the green button around the red info icon?

I cannot use the usual white border around the red icon (as in the snippet below) , because it needs to be transparent and displays the background color of the page. p>

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

<div class='shape'></div>

Run codeHide result

Answer 1

Using Box Shadow:

box-shadow , . (.shape:before) , , (.container) . .container.

, radial-gradient, IE8+. , , . , ( , ).

.container {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 25px;
}
.shape {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  overflow: hidden;
}
.shape:before {
  position: absolute;
  content: '';
  height: 60%;
  width: 60%;
  top: -20%;
  right: -20%;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 50px rgb(0, 199, 158);
}
.container:after {
  position: absolute;
  content: '2';
  height: 50%;
  width: 50%;
  right: -20%;
  top: -20%;
  background: rgb(255, 67, 0);
  color: white;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
}

/* just for demo */

*, *:after, *:before {
  transition: all 2s;
}
.container:hover {
  height: 100px;
  width: 100px;
}
.container:hover .shape:before {
  box-shadow: 0px 0px 0px 100px rgb(0, 199, 158);  
}
.container:hover:after {
  line-height: 50px;
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  min-height: 100vh;
}

<div class='container'>
  <div class='shape'></div>
</div>

Hide result

---

:

- radial-gradient background-image, , , . .

box-shadow, IE10+. , , .

.shape {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-image: radial-gradient(60% 60% at 92.5% 7.5%, transparent 49.5%, rgb(0,199,158) 50.5%);
  margin: 25px;
}
.shape:after {
  position: absolute;
  content: '2';
  height: 50%;
  width: 50%;
  right: -20%;
  top: -20%;
  background: rgb(255,67,0);
  color: white;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
}

/* just for demo */

*, *:after {
  transition: all 1s;
}
.shape:hover {
  height: 100px;
  width: 100px;
}
.shape:hover:after {
  line-height: 50px;
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class='shape'></div>

Hide result

---

SVG:

SVG , .

.shape {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 25px;
}
svg {
  position: absolute;
  height: 100%;
  width: 100%;
}
svg path {
  fill: rgb(0, 199, 158);
}
.shape:after {
  position: absolute;
  content: '2';
  height: 50%;
  width: 50%;
  right: -25%;
  top: -5%;
  background: rgb(255, 67, 0);
  color: white;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
}

/* just for demo */

*, *:after {
  transition: all 2s;
}
.shape:hover {
  height: 100px;
  width: 100px;
}
.shape:hover:after {
  line-height: 50px;
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class='shape'>
  <svg viewBox='0 0 60 60'>
    <path d='M55,30 A25,25 0 0,1 5,30 A25,25 0 0,1 42.5,8.34 A16,16 0 0,0 55,30' />
  </svg>
</div>

Hide result

. , , .