如何在CSS中制作此形状？

Question

我要用一个单词的形式来写。

但是如果超过两个字母，我会这样写。

我可以做成这个形状吗？

Answer 1

count{
  position:relative;
  color:white;
  margin:0.5em;
}
count:before{
  content:'';
  min-width:1em;
  position:absolute;
  left:-0.5em;
  right:-0.5em;
  top:-0.2em;
  bottom:-0.2em;
  background-color:blue;
  z-index:-4;
  border-radius:1em;
}

<count>100</count>

<count>5</count>
<count>100.000</count>

尝试一下

Answer 2

您可以使用border radius实现这种形状。

获取更多信息。

Border Radius

Answer 3

<h2 class="number">5</h2>

<h2 class="text">99+</h2>

并使用此CSS

.number{
  background:blue;
  border-radius:50%;
  padding:5px;
  width:50px;
  height:50px;
  text-align:center;
  line-height:50px;
  color:white;
}

.text{
  background:blue;
  border-radius:25px;
  padding:25px;

  text-align:center;
  line-height:25px;
  color:white;
}