htmlの対角線グラデーションラインの2辺のテキストの色を変更する

Question

グラデーションラインの2つの部分のテキストの色を変更する方法はありますか？たとえば、テキストの青い部分（ 's'、 'o'、および 'm'の一部）を黒にしたい場合はここに入力します。

.button{ 
    background: linear-gradient(140deg, #00C9FF 35%, transparent 35%); 
} 

Answer 1

あなたはそれが<p>タグでテキストをラップし、このタグにlinear-gradientを設定できます。

button{ 
 
    background: linear-gradient(140deg, #00C9FF 35%, transparent 35%); 
 
    color: white; 
 
    font-size: 30px; 
 
} 
 

 
p{ 
 
    margin: 0; 
 
    font-size: 50px; 
 
    background: -webkit-linear-gradient(130deg, red 65%, black 15%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<button type="button"><p>some long text</p></button>