我怎样才能用css复制这个？

Question

所以我正在玩一些CSS，并希望给我的标题一个特定的风格。我在想的是像我在这里制作的图像：

我试图谷歌为想要相同的人，但我无法找到我想要的东西。

这是我到目前为止所做的：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

你们中的任何一个可以帮助我吗？或者至少在正确的方向：P

谢谢！

Answer 1

使用border radius属性。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;