我正在围绕字体真棒图标创建一个圆圈。我的问题是，当我添加position: absolute圆成为一个椭圆。css border-radius圆形变为椭圆形，位置：绝对

同样的情况，如果我是设置display: block

这里是什么，我想实现的图像 -

的CSS

slide.assessment-score .score-heading{

height: 33%;

background-color: #a8db66;

border-radius: 5px 5px 0 0;

color: #ffffff;

position: relative;

}

slide.assessment-score .score-heading i{

position: absolute;

bottom: 0;

right: 0;

left: 0;

font-size: 6em;

margin-bottom: -30px;

border-radius: 50%;

padding: 1rem

background-color: black;

}

+0

你需要定义的宽度和高度绝对定位或相对它包定位div或者将定位设置为相对，并使用顶部，左侧定位它 –

+1

问题不是因为你设置了'position：absolute'。这是因为你设置了'right：0'和'left：0'。这说明它占据了整个宽度。 –

+0

问题是高度宽度会改变，所以我不知道值 –