css - 标题后的三 Angular 形与标题背景渐变相匹配

Question

我必须制作这样的标题:

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

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 的浏览器提供后备。