CSS Отображает один символ в 2 цветах

Возможно ли в css сделать один символ в двух цветах?

Я имею в виду, например, символ "B". Первая верхняя половина в RED и вторая половина в BLUE

Ответы

Ответ 1

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(red 49%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Заполните префиксы собственных поставщиков.

Ответ 2

Одно из решений:

HTML:

<span class="half" title="B">B</span>

(см., что вы должны установить значение атрибута)

CSS

  .half {
        font-size: 90px;
        font-weight: bold;
        position: relative;
        color: blue;
        line-height: 1em;
    }

    .half:before {
        position:absolute;
        content:''attr(title)'';
        color: red;
        height: .5em;
        overflow: hidden;
    }

Проблема заключается в том, что каждый браузер вычисляет значение .5em иначе