header 之后与 header 背景渐变相匹配的三角形

Question

我必须像这样 header:

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

Answer 1

您可以使用 clip-path 来屏蔽 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>

使用此选项，您将不得不为不支持 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>

header 之后与 header 背景渐变相匹配的三角形

Triangle after header that matches header background gradient

css

linear-gradients