background as a triangle

Question

I'd like to have a background on my website in the shape of a triangle. with on the left side de color black and on the right side the color white. See this image for an example. I can't find this on the internet so I hope someone can help me with it. I'd like to do this with css if this is possible. And maybe you can also help me with the text. I mean that as the text is on the black side it turns into a white color. And if de text is on the white side it turns into a black color. See this image for an example. I hope you guys can help me with this. I would really appreciate that!

thank you in advance!

score 1 · Answer 1 · answered Dec 23 '18 at 19:45

i made with 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>

background as a triangle

1 Answers1