html怎么做成圆⾓按钮,html–圆⾓按钮上的斜⾓
使⽤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, 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;
}
使⽤径向渐变：
另⼀种选择是使⽤径向渐变作为背景图像，如下⾯的⽚段所⽰，并定位背景，使其在右上⾓产⽣⼀个斜⾓.完成后，添加徽章圈并定位它应该是相当直接的.
与盒式阴影⽅法相⽐，这具有较差的浏览器⽀持，因为它仅适⽤于IE10.如果需要响应性，那么使⽤渐变将是更好的选择，因为它们可以采⽤与框阴影不同的百分⽐值.
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%);
使⽤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 {box shadow怎么设置
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%);
}
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.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。