O mais próximo que consegui foi usando background-clip: text
e text-fill-color: transparent
.
Veja:
.two-colors{
font-size: 160px;
background: linear-gradient(to right, blue 50%, red 0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
font-family: Arial;
}
<span class="two-colors">A</span>
<span class="two-colors">B</span>
<span class="two-colors">ABC</span>
Elaborei o CSS parecido com o dessa resposta no SOEN, porém eu mudei a direção do gradiente, para ficar meio a meio verticalmente as cores e preferi aplicar o estilo letra por letra.
No caso, para as letras ficarem "na mesma linha", é necessário que o elemento que recebe o estilo tenha definido o display
com o valor inline-block
ou inline
.
color: transparent
e colocar dois valores emtext-shadow
. Você pode brincar com isso se quiser. – Wallace Maxters 13/09/18 às 19:03