我有一个 css 代码 here as plunktr。我可以使用十六进制代码绘制图标,但我无法使用 css 为刻度图标绘制完美的圆圈。
这是我用过的:
.tick-icon::after {
content: '\2713';
border-radius: 50%;
background-color: red;
font-size: 2rem;
color: #ffffff;
}
我看到的更像是椭圆形。如何使它成为一个完美的圆圈?
答案 0 :(得分:2)
要得到一个圆,伪元素的高度和宽度必须设置为相同的尺寸。如果这不是专门做的,那么系统只会根据字符的尺寸来确定大小,而不是方形。
此代码段使用 CSS 变量来设置字体大小(如您在代码中所用),然后进行计算以设置周围伪元素的尺寸 - 显然将乘数更改为您想要的值。
.tick-icon {
position: relative;
}
.tick-icon::after {
--size: 10rem;
content: '\2713';
position: absolute;
top: 0;
left: 0;
text-align: center;
border-radius: 50%;
background-color: red;
font-size: var(--size);
--dimension: calc(1.5 * var(--size));
width: var(--dimension);
height: var(--dimension);
color: #ffffff;
}
<div class="tick-icon"></div>
答案 1 :(得分:-1)
设置宽度/高度:
.tick-icon::after {
content: '\2713';
border-radius: 50%;
background-color: red;
font-size: 2rem;
width: 2.5rem;
height: 2.5rem;
text-align: center;
display: inline-block;
color: #ffffff;
}