您可以使用渐变为文本着色.诀窍是使该渐变与您的形状相似(形状的边缘具有相同的度数和颜色变化).由于倾斜元素是固定的，因此您需要使渐变也固定以创建文本滚动的 magic 效果:

You can use gradient to color the text. The trick is to have this gradient similar to your shape (same degree and coloration change at the edge of the shape). Since your skewed element is fixed, you need to make the gradient to also be fixed to create the magic effect of text scrolling:

.gradient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
  transform-origin:left;
}

.scroll-content {
  position: absolute;
  top: 50px;
  /* 165deg = 180deg - 15deg   */
  background: linear-gradient(165deg, #fff 195px,#000 195px) fixed;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

<div class="gradient-background">
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p>
  <p> abc 3 </p>
  <p> abc 4 </p>
  <p> abc 5 </p>
  <p> abc 6 </p>
  <p> abc 7 </p>
  <p> abc 8 </p>
  <p> abc 9 </p>
  <p> abc 10 </p>
  <p> abc 11 </p>
  <p> abc 12 </p>
  <p> abc 13 </p>
  <p> abc 14 </p>
  <p> abc 15 </p>
  <p> abc 16 </p>
  <p> abc 17 </p>
  <p> abc 18 </p>
  <p> abc 19 </p>
</div>