标头后与标头背景渐变相匹配的三角形 [英] Triangle after header that matches header background gradient

问题描述

我必须制作一个这样的标题:

I have to make a header like this:

在使用此渐变制作标题时，我没有任何问题.我也知道如何使用 :: after 定位三角形.但是，如何使三角形的颜色与标题背景匹配?问题在于梯度不是静态的.例如，如果我在智能手机中打开页面，因为屏幕较短，则与在监视器中打开相比，渐变将更加紧凑".因此箭头颜色不能是静态的.我不知道该怎么做，有人可以帮我吗?谢谢.

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.

推荐答案

您可以使用 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 的浏览器提供备用.

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

这篇关于标头后与标头背景渐变相匹配的三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！