我需要创建一个带有信息徽章的圆形按钮,如下所示:
如何在红色信息徽章周围的绿色按钮上制作斜 Angular ?
我不能在红色徽章周围使用普通的白色边框(如下面的代码片段),因为它必须是透明的并显示页面背景颜色。 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>
最佳答案
使用盒子阴影:
一种方法是在伪元素上使用 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>
使用径向渐变:
另一种选择是对 background-image
使用 radial-gradient
,就像下面的代码片段一样,并定位背景,使其在右上角产生一个斜 Angular .完成后,添加徽章圈并对其进行定位应该相当简单。
与 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>
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 - 圆形按钮上的斜 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35859095/