Dwu kolorowy tekst /rwd

Question

Cześć, chce zrobić tekst przez który będą przechodziły dwa kolory
Przykład: https://jsfiddle.net/L0h94byt/

Problem polega na tym, że kolory nie schodzą się kiedy zmienia się szerokość ekranu. Miałem taki pomysł, żeby pod tekstem były twa elementy after i before ułożone dokładnie tak samo. Tak to sobie wyobrażam (after - czerwony, before- niebieski):

 

<div class="content-container">

  <h1 class="news-title">Aktualności</h1>

</div>

body {
  margin: 0;
}

.content-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 200px;
  background-color: black;
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0);
  clip-path: polygon(0 100%, 0 0, 100% 0);
}

.news-title {
  position: absolute;
  font-size: 140px;
  top: 20px;
  margin: 0px;
  padding: 0px;
  background: -webkit-linear-gradient(-84.5deg, rgb(76, 76, 76) 0%, rgb(255, 255, 255) 52.5%, rgb(0, 0, 0) 52.5%, rgb(19, 19, 19) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  z-index: 2;
}

Można by też za pomocą jakiś obliczeń w zależności od szerokości ekranu zmieniać wartość deg (calc()?)

background: -webkit-linear-gradient(-84.5deg, rgb(76, 76, 76) 0%, rgb(255, 255, 255) 52.5%, rgb(0, 0, 0) 52.5%, rgb(19, 19, 19) 100%);

Answer 1

Jeżeli używasz takiej czcionki spróbuj użyć SVG. Polecam.

Taki tekst jest dość łatwo zrobić.