Thay đổi màu văn bản trên 2 mặt của đường chéo chéo trong html

Question

Bất kỳ ý tưởng nào về cách thay đổi màu văn bản cho 2 phần của đường kẻ dốc? Ví dụ ở đây nếu tôi muốn phần màu xanh của văn bản ('s', 'o' và một phần của 'm') là màu đen?

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

Answer 1

Bạn có thể làm điều đó gói các văn bản trong một thẻ <p> và thiết lập một linear-gradient để thẻ này.

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>