2

我正在尝试围绕我在 div 中添加的任何内容制作一个圆圈（不是椭圆形）以创建徽章效果。我希望大小根据内容是动态的，我只想使用 CSS。这可能吗？我所拥有的如下。

.a-circle-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 10px solid;
  border-radius: 50%;
  padding: 30px;
  margin-top: 20px;
  font-size: 30px;
}
<div class="a-circle-badge"><span>2200</span></div>

4

1 回答 1

1

您可以通过使用百分比来使用伪元素使元素height等于（请注意，填充是根据元素的宽度计算的）。widthpadding-top

此外，我正在使用和inline-flex容器，以便元素的宽度与其内容一样多 - 请参见下面的演示：

.a-circle-badge {
  display: inline-flex; /* <-- inline flex container */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 10px solid;
  border-radius: 50%;
  padding: 30px;
  margin-top: 20px;
  font-size: 30px;
}

.a-circle-badge span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.a-circle-badge span::before {
  content: '';
  padding-top: 100%; /* <-- will create height = width */
}
<div class="a-circle-badge"><span>2200</span></div>
<div class="a-circle-badge"><span>Some text here</span></div>

于 2019-04-19T02:00:03.783 回答