CSS如何实现这样的分割数字价格样式

Question

移动端web的一个价格区域，每个数字分开并且要和背景一起自适应

Answer 1

HTML

<div id="container">
123213
</div>

CSS

  #container {
    width: 400px;
    height: 100px;
    position: relative;
    font-size: 68px;
    line-height: 100px;
  }
  #container::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index:-1;
    background-color: #ff2300;
  }

  #container::after {
    content: "";
    display: block;
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index:-1;
    background-color: #00ff23;
  }

尺寸/颜色/圆角什么哒需要楼主自己调整了

Answer 2

我勒个去了 - - 直接求代码了 这样也好？