圆形按钮的斜角边缘

Question

我需要创建一个带有信息徽章的圆形按钮，就像这个：

我该如何使绿色按钮的斜角环绕红色信息徽章？不能使用普通的白色边框来包围红色徽章（如下面的代码片段中所示），因为它必须是透明的并显示页面背景颜色。

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

- PEC

---

我已经在问题中添加了一个虚拟代码（带有白色边框的代码）因为没有代码的问题往往会被关闭（即使代码不是必须的）。这是为了防止一个本来不错的问题被关闭。如果您对我的编辑感到不满意，请随时回滚。 :) - Harry

Answer 1

使用盒子阴影：

一种方法是在伪元素上使用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>

---

使用径向渐变：

另一种选择是使用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>

---

使用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>

注意: 我在徽章中使用了伪元素仅供说明，但是由于您需要向其中添加动态内容，我建议用子元素替换它。

- Harry