html – 圆角按钮上的斜角

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

如何在红色信息徽章周围的绿色按钮上制作斜角？

我不能在红色徽章周围使用正常的白色边框(如下面的代码段),因为它必须是透明的并显示页面背景颜色.

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

解决方法

使用Box Shadow：

一种方法是在伪元素上使用Box-shadow,如下面的代码片段所示.这里,一个伪元素(.shape：before)的位置使得它稍微高于圆圈的右上角,然后它的框阴影用于填充具有所需背景的父元素(.container)颜色.徽章是通过.container元素上的另一个伪元素添加的.

这比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,158);
}
.container:after {
  position: absolute;
  content: '2';
  height: 50%;
  width: 50%;
  right: -20%;
  top: -20%;
  background: rgb(255,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,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>

使用径向渐变：

另一种选择是使用径向渐变作为背景图像,如下面的片段所示,并定位背景,使其在右上角产生一个斜角.完成后,添加徽章圈并定位它应该是相当直接的.

与盒式阴影方法相比,这具有较差的浏览器支持,因为它仅适用于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,158) 50.5%);
  margin: 25px;
}
.shape:after {
  position: absolute;
  content: '2';
  height: 50%;
  width: 50%;
  right: -20%;
  top: -20%;
  background: rgb(255,*:after {
  transition: all 1s;
}
.shape:hover {
  height: 100px;
  width: 100px;
}
.shape:hover:after {
  line-height: 50px;
}
body {
  background-image: radial-gradient(circle,#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,158);
}
.shape:after {
  position: absolute;
  content: '2';
  height: 50%;
  width: 50%;
  right: -25%;
  top: -5%;
  background: rgb(255,*:after {
  transition: all 2s;
}
.shape:hover {
  height: 100px;
  width: 100px;
}
.shape:hover:after {
  line-height: 50px;
}
body {
  background-image: radial-gradient(circle,#153346 100%);
}

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

Note: I’ve used pseudo-element for the badge just for illustration but since you’d need to add dynamic content into it,I’d recommend replacing that with a child element.

html – 圆角按钮上的斜角

解决方法

相关推荐