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.如果需要响应性,那么使用渐变将是更好的选择,因为它们可以采用与框阴影不同的百分比值.

.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%);

}

使用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%);

}

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.