问题

<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>要显示完整的句子，但目前是白色的被切掉的部分应该是黑色的，显示在粉色背景上。</h1>
  </div>
</div>

[![示例图片1][1]][1]

如何实现完整句子可见，但目前是白色的文字在粉色背景上显示为黑色，类似上面的效果？

[![示例图片2][2]][2]

就像上面这样？

[1]: https://i.stack.imgur.com/VKpR2.png
[2]: https://i.stack.imgur.com/K1C07.png

<details>
<summary>英文:</summary>

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

[![enter image description here][1]][1]


How could I go about achieving a result where the full sentence is visible however the text which is currently white that is being cut off is black on the pink background. 

[![enter image description here][2]][2]

So its something like the above?

  [1]: https://i.stack.imgur.com/VKpR2.png
  [2]: https://i.stack.imgur.com/K1C07.png

</details>


# 答案1
**得分**: 3

以下是您要翻译的内容：

"你可以通过使用背景与混合模式（mix-blend-mode）和滤镜来实现这个效果。

```css
.heading-container {
  background: linear-gradient(to bottom left, #0000 50%, #fff 50.1%); /* 渐变中包含透明和白色 */
  padding: 20px;
  isolation: isolate; /* 不与底层混合 */
  filter: invert(1); /* 反转颜色（白色变黑色，黑色变白色） */
}

h1 {
  color: white; /* 也是白色 */
  mix-blend-mode: difference; /* 白色与白色的差异将产生黑色，因此文本将一半是白色，一半是黑色 */
}

<div style="background-color:pink">
  <div class="heading-container">
    <h1>Lorem Ipsum Heading Test Lorem Ipsum Heading Test</h1>
  </div>
</div>

"

.heading-container {
  background: linear-gradient(to bottom left, #0000 50%, #fff 50.1%); /* transparent and white in the gradient */
  padding: 20px;
  isolation: isolate; /* don't blend with bottom layer*/
  filter: invert(1); /* invert the coloration (white -> black and black -> white) */
}

h1 {
  color: white; /* also white here */
  mix-blend-mode: difference; /* difference between white and white will give black so the text will be half white and half black */
}

<div style="background-color:pink">
  <div class="heading-container">
    <h1>Lorem Ipsum Heading Test Lorem Ipsum Heading Test</h1>
  </div>
</div>

答案2

得分: 0

我相当确信有更好的方法（请参考@TemaniAfif的答案），但一个简单的解决方案是使用两层文本：

```css
.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%);
}

请注意，当您尝试选择文本时，这并不适用得很好。

尝试一下：

<!-- 开始代码片段: js 隐藏: true -->

<!-- 语言: lang-css -->

.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;
}

<!-- 语言: lang-html -->

<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>

<!-- 结束代码片段 -->

<details>
<summary>英文:</summary>

I&#39;m pretty sure that there are better ways (see @TemaniAfif&#39;s answer), but a simple solution is to use two layers of text:

```css
.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%);
}

Do note that this doesn't work very well when you try to select the text.

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->