与标题背景渐变匹配的标题后的三角形

Question

我必须制作这样的标题：

我用这个渐变制作标题没有问题。我也知道如何用::after 定位一个三角形。但是，如何使三角形颜色与标题背景相匹配？问题是梯度不是静态的。例如，如果我在智能手机中打开页面，由于屏幕较短，渐变会比在显示器中打开时更“紧凑”。所以箭头颜色不能是静态的。我不知道我该怎么做，有人可以帮助我吗？谢谢。

Answer 1

您可以使用clip-path 来屏蔽标题：

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>

使用此选项，您将不得不为不支持 clip-path 的浏览器提供备用。

Answer 2

这是另一个在不使用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>

更新

由于background-attachment:fixed 的错误和transform 的使用，上述解决方案不适用于Firefox。这是另一个应该可行的想法：

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