0

I made the background red using clip-path

.page:before {
content: '';
position: absolute;
clip-path: polygon(100% 50%, 0 0, 0 100%);
max-width: 550px;
height: 950px;
background: #F41B15 0% 0% no-repeat padding-box;
top: -20px;
z-index: -1;
width: 100%;}

I have a piece of gray text, when it overlaps the background, I want it to automatically turn white on every screen

.page  p {
width: 100%;
text-align: center;
margin: auto;
margin-top: 31px;
color : #FFF}

This is images enter image description here

  • 1
    Possibly look into the mix-blend-mode css property found here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode –  May 23 '21 at 16:57

1 Answers1

0

I would approach this by having a span element with the same content as your paragraph and an attirbute aria-hidden="true" to avoid accessibility issues, then setting the paragraph position to relative and the span position to absolute on the top left, clipping the path of the span with the same path than your .page:before and having the text of the span with a color of white on top of the text.

Clément Cartier
  • 174
  • 2
  • 11