Triangle after header that matches header background gradient

Question

I have to make a header like this:

I have no problem in making the header with this gradient. I also know how to position a triangle with ::after. However, how can I make the triangle color to match header background? The problem is that the gradient is not static. For example, if I open the page in a smartphone, as the screen is shorter, the gradient will be more "compact" than if I open in a monitor. So the arrow color can't be static. I have no idea how I could do this, can someone help me? Thanks.

Answer 1

You can use clip-path to mask the header:

header {
  height: 70px;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 60px, calc(100% - 40px) 60px, calc(100% - 60px) 70px, calc(100% - 80px) 60px, 0 60px);
  background-image: linear-gradient(to right, #3f5efb, #fc466b);
}

<header></header>

With this option you're going to have to provide fallbacks for browsers that don't support clip-path.

Answer 2

Here is another idea more supported without the use of clip-path:

.box {
  height:50px;
  background:linear-gradient(to right,purple,red);
  background-attachment:fixed; /*This will do the magic*/
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background:linear-gradient(to right,purple,red);
  background-attachment:fixed; /*This will do the magic*/
  transform:rotate(45deg);
  right:20px;
  bottom:-10px;
  animation:slide 5s infinite alternate linear;
}

@keyframes slide {
  from {
     right:20px;
  }
  to {
    right:calc(100% - 40px);
  }
}

<div class="box"></div>

UPDATE

The above soltution is not working with Firefox due to a bug with background-attachment:fixed and the use of transform. Here is another idea that should work:

.box {
  height:50px;
  background:linear-gradient(to right,purple,red);
  background-attachment:fixed; /*This will do the magic*/
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  width:20px;
  height:10px;
  background:
  linear-gradient(to right,purple,red);
  background-attachment:fixed; /*This will do the magic*/
  right:20px;
  bottom:-10px;
  animation:slide 5s infinite alternate linear;
}
.box:after {
  content:"";
  position:absolute;
  z-index:2;
  width:20px;
  height:10px;
  background:
  linear-gradient(to bottom right,transparent 50%,white 51%)100% 0/50% 100% no-repeat,
  linear-gradient(to bottom left,transparent 50%,white 51%)0 0/50% 100% no-repeat;
  right:20px;
  bottom:-10px;
  animation:slide 5s infinite alternate linear;
}

@keyframes slide {
  from {
     right:20px;
  }
  to {
    right:calc(100% - 40px);
  }
}

<div class="box"></div>