これをCSSでどのように複製できますか？

Question

私はいくつかのCSSで遊んでいたので、私のタイトルに特定のスタイルを与えたいと思っていました。

を、私は同じことを望んでいた人々のためのgoogleしてみましたが、私は本当に私が探していたものを見つけることができませんでした：私は何を考えていたことは、私がここで作られた画像のようなものでした。

これは私がこれまで持っているものです。

.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

border radiusプロパティを使用します。

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