Css 更改多边形外部的文本 colored颜色

发布于07月07日

<style>
  .heading-container {
    clip-path: polygon(0% 24.75%, 49.5% 49.88%, 99% 75%, 0% 75%);
    background: #000;
    padding: 20px;
  }
  
  h1 {
    color: white;
  }
</style>
<div style="background-color:pink">
  <div class="heading-container">
    <h1>Lorem Ipsum Heading Test Lorem Ipsum Heading Test</h1>
  </div>
</div>

我如何才能获得完整句子可见的结果，然而，当前被切掉的白色文本在粉色背景上是黑色的.

所以它类似于上面的内容？

推荐答案

我非常肯定有更好的方法(参见@TemaniAfif的答案)，但一个简单的解决方案是使用两层文本:

.wrapper {
  position: relative;
}

.heading-container {
  padding: 20px;
}

.clipped {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0% 24.75%, 49.5% 49.88%, 99% 75%, 0% 75%);
}

请注意，当您try Select 文本时，这并不是很有效.

试试看:

.wrapper {
  position: relative;
  background: pink;
}

.heading-container {
  padding: 20px;
}

.clipped {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0% 24.75%, 49.5% 49.88%, 99% 75%, 0% 75%);
  background: #000;
}

h1 {
  color: black;
}

.clipped h1 {
  color: white;
}

<div class="wrapper">
  <div class="heading-container">
    <h1>Lorem Ipsum Heading Test Lorem Ipsum Heading Test</h1>
  </div>
  <div class="heading-container clipped">
    <h1>Lorem Ipsum Heading Test Lorem Ipsum Heading Test</h1>
  </div>
</div>