css - テキストを縦に2色に分割するにはどうすればよいですか？

Question

純粋なCSSを使用して、div内の単語を垂直方向に2色に分割したいのですが、どうすればよいでしょうか。

Answer 1

確かに CSS3 グラデーションとクリップ プロパティを使用できます。使用した Webkit は認識していますが、他のブラウザについてはわかりません。必要に応じて、これを試してください。

デモ（chromeでご覧ください）

div {
  font: 40px Arial;
  background: -webkit-linear-gradient(top, #0d2172 0%,#0d2172 50%,#ff2828 50%,#ff0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

注：ウェブ開発者は最新のブラウザを使用していないため、同じように機能する独自のプロパティを知っている場合は、私の回答を自由に編集してください