html - 我怎样才能用 css 复制它？

Question

所以我正在尝试使用一些 CSS，并希望为我的标题赋予特定的样式。我在想的是我在这里制作的图像:

我试着用谷歌搜索有同样需求的人，但我找不到真正想要的东西。

这是我目前所拥有的:

.test {
  position: relative;
  font-size:40px;
  height:40px;
  width:400px;
}
.test>span {
  display: block;
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  height: 60%;
  color: #31FF5A;
}
.test>.top{
  z-index:2;
  top:0;
}
.test>.bottom{
  color: black;
  height: 100%;
  z-index:1;
  bottom: 0;
}

<div class="test">
  <span class="top">TEXT</span>
  <span class="bottom">TEXT</span>
</div>

你们谁能帮帮我？或者至少在正确的方向 :P

谢谢!

Answer 1

使用边框半径属性。

.test {
  position: relative;
  font-size:40px;
  height:40px;
  width:400px;
}
.test>span {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    /* height: 60%; */
    color: #31FF5A;
    border-bottom-left-radius: 90%;
}
.test>.top{
  z-index:2;
  top:0;
}
.test>.bottom {
    color: black;
    height: 100%;
    z-index: 1;
    bottom: 0;
    border-bottom-right-radius: 346%;
}

<div class="test">
  <span class="top">TEXT</span>
  <span class="bottom">TEXT</span>
</div>