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

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

这是另一个不使用ABC 3 cvb DEF 4 bnm 支持的想法：

＆＃13;

＆＃13;

clip-path

＆＃13;

.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);
  }
}

＆＃13;

＆＃13;

＆＃13;

<强>更新

由于<div class="box"></div>的错误和background-attachment:fixed的使用，上述解决方法无法与Firefox一起使用。这是另一个应该有用的想法：

＆＃13;

＆＃13;

transform

＆＃13;

.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);
  }
}

＆＃13;

＆＃13;

＆＃13;