背景为三角形[重复]

【问题标题】：background as a triangle [duplicate]背景为三角形[重复]
【发布时间】：2018-12-23 19:39:21
【问题描述】：

我想在我的网站上有一个三角形的背景。左侧为黑色，右侧为白色。有关示例，请参见 this 图像。我在互联网上找不到这个，所以我希望有人可以帮助我。如果可能的话，我想用 css 来做这件事。也许你也可以帮我写文字。我的意思是，由于文本在黑色一侧，它变成了白色。如果 de text 在白色的一侧，它会变成黑色。有关示例，请参见 this 图像。我希望你们能帮助我解决这个问题。我真的很感激！

提前致谢！

【问题讨论】：

标签： html css colors background

【解决方案1】：

我是用mix-blend-mode:difference;制作的

div {
  width:400px;
  height:400px;
  background:linear-gradient(45deg, black 0%, black 50%, white 50%, white 100%);
  display:flex;
  justify-content:center;
  align-items:center;
}

h1 {
  color:#fff;
  font-size:30px;
  mix-blend-mode:difference;
}

<div>
<h1>this is a text</h1>
</div>

【讨论】：