Html 圆形按钮上的斜角

我需要创建一个带信息徽章的圆形按钮，如下所示：

如何在红色信息徽章周围的绿色按钮上创建斜角

I无法在红色徽章周围使用正常的白色边框（如下面的代码片段），因为它必须是透明的，并且显示页面背景色

.shape{
位置：相对位置；
高度：50px；
宽度：50px；
边界半径：50%；
背景：rgb（0199158）；
利润率：25px；
}
.形状：之后{
位置：绝对位置；
内容：''；
顶部：-10px；
右：-10px；
高度：25px；
宽度：25px；
边界半径：50%；
边框：3倍纯白；
背景：rgb（255,67,0）；
}
身体{
背景：巧克力；
}

---

使用方框阴影：

一种方法是对伪元素使用

box shadow

，如下面的代码片段所示。在这里，一个伪元素（

.shape:before

）的位置使其略高于圆的右上角，然后使用其框阴影用所需的背景色填充父元素（

.container

）。徽章是通过

.container

元素上的另一个伪元素添加的

这比在IE8+中使用的

径向渐变方法具有更好的浏览器支持。缺点是它只能支持主圆的纯色背景色，因为阴影不能是渐变色或图像。此外，它似乎需要两个元素（我正在尝试减少它，如果成功，将把它添加到答案中）


.container{
位置：相对位置；
高度：50px；
宽度：50px；
边界半径：50%；
利润率：25px；
}
.形状{
位置：绝对位置；
身高：100%；
宽度：100%；
顶部：0px；
左：0px；
边界半径：50%；
溢出：隐藏；
}
.形状：以前{
位置：绝对位置；
内容：''；
身高：60%；
宽度：60%；
前-20%；
右图：-20%；
边界半径：50%；
盒影：0px0px0px50pxrgb（0199158）；
}
.货柜：之后{
位置：绝对位置；
内容：“2”；
身高：50%；
宽度：50%；
右图：-20%；
前-20%；
背景：rgb（255,67,0）；
颜色：白色；
线高：25px；
文本对齐：居中；
边界半径：50%；
}
/*只是为了演示*/
*，*：之后，*：之前{
过渡：所有2；
}
.容器：悬停{
高度：100px；
宽度：100px；
}
.容器：悬停。形状：之前{
盒影：0px 0px 0px 100px rgb（0199158）；
}
.容器：悬停：之后{
线高：50px；
}
身体{
背景图像：径向梯度（圆形，#3F9CBA 0%，#153346 100%）；
最小高度：100vh；
}
我在问题中添加了一个伪代码（带白色边框的代码），因为没有代码的问题往往会被关闭（即使问题中不强制出现代码）。这是为了阻止一个本来不错的问题的结束。如果您对我的编辑不满意，请随时回滚：）